欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-07 15:56:46
...

先是用了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的值,即改变了下拉提醒框中的内容。