ElementUI的autocomplete组件+vue实现搜索联想（输入框提示）

select+autocomplete+buttom组件组合成一个带有选择的搜索框（ 其中slot 属性是就用来指定在 autocomplete 中前置或者后置内容。）

<el-autocomplete :fetch-suggestions="querySearch" placeholder="请输入内容"  @select="handleSelect" v-model="searchValue" clearable class="input-with-select">
                  <el-select v-model="selectValue" slot="prepend" placeholder="请选择">
                      <el-option label="编号" value="id"></el-option>
                      <el-option label="姓名" value="username"></el-option>
                      <el-option label="微信/QQ" value="qq"></el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search" @click="selectSearch"></el-button>
</el-autocomplete>

vue：

data: {
    tableData: {$listb},//绑定页面显示的数据，初始为原始数据
    tableDataAll: {$listb},//保存原始数据
    selectValue:"id",//选择器选择的内容，初始为编号
    searchValue:null //搜索框输入的内容
  },

初始的数据可以通过各种方式传进来，这个就看各自的需求了。

那么数据有了再写几个方法：

//搜索
      selectSearch() {
          if(this.searchValue!==null){              
              let arr = this.tableDataAll.filter(item => {
                  if(item[this.selectValue]==null){
                      item[this.selectValue]="";
                      return item[this.selectValue].indexOf(this.searchValue) !== -1;
                  }else{
                      return item[this.selectValue].indexOf(this.searchValue) !== -1;
                  }
              });
              this.tableData = arr;
          }else{
              this.tableData = this.tableDataAll;
          }
      },
      //搜索联想
      querySearch(queryString, cb) {
          let programs = this.tableData;
          let programList = [];
          //从数据中拿出要联想的字段，并给它的名改成指定的{value：值}的格式才能正常显示
          for(let i=0;i<this.tableData.length;i++){
              programList.push({'value':programs[i][this.selectValue]})
          }
          let results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList;
          //数据可能会存在重复的值，那么就不需要重复显示，所以调用下面写的去重方法
          results = this.arrayReuse(results);
          cb(results);//最后给到显示
      },
      //联想内容根据输入的搜索内容过滤
      createStateFilter(queryString) {
          return (program) => {
              return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
          };
      },
      handleSelect(item) {
          this.searchValue = item.value;
      },
      //数组对象去重
      arrayReuse(arr) {
          const res = new Map();
          return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
      }
    },

如果选择器的值改变了，那么输入框的内容得清空，既然搜索内容清空了，那么显示的数据也得是原数据吧，所以最后完善一下，给两个数据做个监听：

watch: {
        searchValue(){
            //搜索框内容改变（包括清空）就搜索
            this.selectSearch();
            //搜索框没输入或者清空了显示回原始的数据（和上面一种觉得哪种更适合就看情况用）
            // if(this.searchValue == ""){
            //     this.tableData = this.tableDataAll;
            // }
        },
        selectValue(){
            //选择器一旦重新选择了，就让输入框的内容清空
            this.searchValue = "";
        }
    },