vue+element模拟百度搜索(输入建议)

1、页面部分

 <el-form-item label="供应商号" prop="lifnrid">
           <el-autocomplete
            class="el-input"
            style="width: 545px"
            v-model="form.lifnrid"
            :fetch-suggestions="getMbLFA"
            placeholder="请输入供应商号"
            @select="selectGroup"
            :trigger-on-focus="false">
          </el-autocomplete>
 </el-form-item>

fetch-suggestions 是一个返回输入建议的方法属性，在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中. 

2、变量定义初始化部分：

  data() {
    return {
      // 供应商表格数据
      mbLFA1List: [],
      // 表单参数
      form: {},
    }
}

3、:fetch-suggestions方法getMbLFA()

/*搜索供应商*/
    getMbLFA(queryString, cb){
      if(this.form.lifnrid!=null && this.form.lifnrid!=''){
        listMbLFA1({lifnrid:this.form.lifnrid}).then(res=>{
          var arr = [];
          for (var i = 0; i < res.rows.length; i++){
            if (res.rows[i].lifnrid.indexOf(this.form.lifnrid) >= 0){
              arr.push({
                value:res.rows[i].lifnrid + '-' +res.rows[i].name1,
                id:res.rows[i].lifnrid,
                label:res.rows[i].name1,
              })
            }
          }
          this.mbLFA1List = arr;
          cb(this.mbLFA1List);
        });
      }
    },

4、 在下拉框进行选择时@select输入框赋值方法selectGroup()

    selectGroup(item) {
      this.form.lifnrid = item.id;
      this.doAutoFill();
    },

结论:el-autocomplete(动态搜索)控件在操作流畅度方远大于el-select(先加载全部待选数据-数据仅限于初始化的数据)。