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