Vue+ElementUI实现input框模糊查询提醒

先是用了ElementUI中给的el-autocomplete例子：

<el-autocomplete
      class="inline-input"
      v-model="inputName"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
></el-autocomplete>

querySearch是这样定义的：

querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

这样实现出来的效果是，只能按照输入字符的顺序查询出结果，比如列表中有“喜茶、贡茶、茶多多”，在输入框中输入“茶”，只能提醒出“茶多多”，而没有其余两个，于是做了一下修改。

 

输入框的定义不变：

<el-autocomplete style="width:100%" class="inline-input" v-model="inputName" :fetch-suggestions="querySearch" placeholder="请输入文件名"></el-autocomplete>

然后对绑定的inputName进行watch监听：

watch:{
  inputName:{
    handler: function() {
      this.csvS = [];//这是定义好的用于存放下拉提醒框中数据的数组
        var len = this.csvList.length;//csvList是页面初始化时得到的初始全部数据
        var arr = [];
        for (var i = 0; i < len; i++) {//根据输入框中inputName的值进行模糊匹配
          if (this.csvList[i].indexOf(this.inputName) >= 0) {
            arr.push(this.csvList[i]);//符合条件的值都放入arr中
          }
        }
        console.log(arr);
        
        //el-autocomplete元素要求数组内是对象，且有value属性，此处做一个格式调整
        for (var i = 0; i < arr.length; i++) {
          var obj = { value: "" };
          obj.value = arr[i];
          this.csvS.push(obj);
        }
    }
  }
}

然后querySearch变成这样：

querySearch(queryString, cb) {
      var csvS = this.csvS;
      cb(csvS);
}

在页面初始获得全部数据之后，先转换格式赋给this.csvS一次，之后根据inputName值的变化实时改变this.csvS的值，即改变了下拉提醒框中的内容。