layui select 根据输入文字，从后台动态获取数据改变备

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')
          })
        })
      },