layui 中的 select，如果使用了 lay-search 参数，可以实现智能搜索备选项功能，但是无法在输入文字时动态从后台获取数据。在网上搜了一下，除了 formSelect-v4.js 有自定义这方面的功能之外，没有找到其它资源。但是如果 select 是放在 form.layui-form 内部时，layui 的 form.render() 方法会覆盖 formSelect-v4.js 的效果。因此，目前看来只能用 jquery 来 hack layui 对 select 的处理过程。
假定在 vue 文件中有一个 select：
<div class="layui-form" lay-filter="PLSearchBox">
<div class="layui-form-item layui-inline wp-48">
<div class="layui-form-label" style="width:180px !important;">Department</div>
<div id="sel_dept" class="layui-input-block" style="margin-left: 180px !important;">
<select name="department" lay-search lay-filter="department">
<option v-for="item in candidates.departments" :value="item">{{item}}</option>
</select>
</div>
</div>
...
</div>
在 vue 文件的 data 中这样定义：
candidates:{
departments:['All'],
detailTypes:['All']，
// 其它 select 的备选项数组
},
之所以这样定义备选项，是有特别的理由的（后面再讲）。
然后在 global.js 中添加一个方法（这样方便在其它页面也能复用）：
window.utilObj={
// self - vue 文件中的 this
// sel_id - select 标签的 id
// category - url 请求所需的参数
// select 在 vue 文件中绑定的备选项数组（这个必须用 self['name'] 的方式使用，
// 否则因为 global.js 中的变化，vue 是不能自动感知到的），
// 这就是前面 vue 文件中的 departments 放在 candidates 下面的原因
smartSelect(self,sel_id,category,candidate_key){
self.lastSearchTimeStamp=(new Date()).getTime()
self.jq(`#${sel_id} input:first`).keyup((e)=>{
let chars=e.target.value
let newSearchTimeStamp=(new Date()).getTime()
if(newSearchTimeStamp-self.lastSearchTimeStamp>300){
webUtils.sendRequest({
method:'get',
url:mglobal.urlPrefix
+'basedata/v1/mapping-candidates?category='+category+'&chars='
+encodeURIComponent(chars),
success(d){
if(d.code==0){
self.candidates[candidate_key]=['All'].concat(d.data)
let ele=self.jq(`#${sel_id} dl.layui-anim-upbit`)
self.jq(`#${sel_id} dl.layui-anim-upbit dd`).unbind('click')
self.jq(`#${sel_id} dl.layui-anim-upbit dd`).remove()
for(let item of self.candidates[candidate_key]){
ele.append(self.jq(`<dd lay-value="${item}" style="">${item}</dd>`))
}
self.jq(`#${sel_id} dl.layui-anim-upbit dd`).bind('click',(e)=>{
e.preventDefault()
let t=e.target.innerHTML
let pos=self.candidates[candidate_key].findIndex((m)=>m==t)
let sel=self.candidates[candidate_key].splice(pos,1)
self.candidates[candidate_key].unshift(sel[0])
setTimeout(()=>{
self.jq(`#${sel_id} input:first`).val(t).css({opacity:1})
},300)
self.jq(`#${sel_id} input:first`).css({opacity:0.5})
})
}
},
error(e){
console.log(e)
}
})
self.lastSearchTimeStamp=(new Date()).getTime()
}
})
},
...
}
这些都定义好之后，只需要在 vue 文件的 mounted 中这样使用：
mounted(){
var self=this;
layui.use(['jquery','element','form'],(jquery,element,form)=>{
self.element=element;
self.form=form;
self.jq=jquery;
element.render();
form.render(null,'PLSearchBox');
self.$nextTick(()=>{
utilObj.smartSelect(self,'sel_dept','bu','departments')
utilObj.smartSelect(self,'sel_dt','detail_type_name','detailTypes')
})
})
},
网友评论