Vue 中使用Element Input组件实现输入后匹配输入建议

本文已参与「新人创作礼」活动，- 起开启掘金创作之路。

在项目中遇到用户在输入框输入后需要匹配输入建议的需求，选择使用Element 的Input组件来实现输入后匹配输入建议

实现代码

一、输入框

<el-autocomplete
     clearable
     class="inline-input"
     v-model="productCode"
     :fetch-suggestions="querySearch"   // 匹配搜索建议方法
     placeholder="请输入产品编码"
     @select="handleSelect"
>/></el-autocomplete>

二、方法

this.restaurants是自己定义的数据（需要进行匹配的数据）

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
        );
      };
    },