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

最新推荐文章于 2024-07-31 10:29:53 发布

汪汪队出击

最新推荐文章于 2024-07-31 10:29:53 发布

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_58671311/article/details/127325295

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在项目中遇到用户在输入框输入后需要匹配输入建议的需求，选择使用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
        );
      };
    },