el-input输入框带建议模糊匹配搜索

html代码：

         <el-autocomplete
            @change="searchFn"
            class="search-name"
            v-model.trim="searchForm.name
            placeholder="请输入"
            clearable
            :fetch-suggestions="querySearchName"
            @select="searchFn"
          >
          </el-autocomplete>

js代码：

   // 输入框建议
    querySearch(val, cb) {
      // nameList为需要匹配的数据
      let restaurants = this.nameList;
      let results = val
        ? restaurants.filter(this.createFilter(val))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(val) {
      return (restaurant) => {
        // value，此处如果换成nameList的某一项就失效了，好像必须为value;可以forEach处理一下数据
        return restaurant.value.toLowerCase().indexOf(val.toLowerCase())> -1;
        //官网示例此处是===0，但是只能匹配首字，达不到模糊匹配的功能，此处改成-1是包含该字段即可
      };
    },




//处理示例：this.nameList = [{name:'张三',age:18},{name:'王五',age:19}]

//想输入建议模糊匹配name名称，可以处理一下子需要匹配的数组

//this.nameList.forEach(item=>{item['value']=item.name})

参考文章：Element UI input输入框实现模糊查询_element ui input模糊搜索_阿wei程序媛的博客-CSDN博客