纯前端实现模糊搜索

本文主要使用autocomplete组件来实现

autocomplete组件介绍

autocomplete是input组件的一个分支，专门用来处理模糊匹配的相关知识，很多时候用户希望输入一个单词就可以自动匹配到相关的内容，内容会显示在下拉框，这时候就是这个组件就有发挥作用的地方了

html

<el-form-item label="优惠券名称">
    <el-autocomplete
      class="inline-input"
      v-model="queryParams.couponPackageName"
      :fetch-suggestions="querySearch"
      placeholder="请输入优惠券名称"
      style="width: 220px"
      clearable
      :trigger-on-focus="false"
    ></el-autocomplete>
</el-form-item>

:fetch-suggestions="querySearch" 是一个绑定的属性，用于指定一个方法，该方法将在用户输入时触发以获取下拉列表

JS

    // 获取后台数据并格式化成我们需要的格式 看你自己后台接口是啥数据格式
    // 处理后的数据格式 [{ value: item.couponPackageName }]
    getFilterList() {
      // obtainList 后台接口
      return obtainList(params)
        .then((res) => {
          if (res.code === "200") {
            console.log(
              res.rows.map((item) => ({ value: item.couponPackageName })),
              "res"
            );
            return res.rows.map((item) => ({ value: item.couponPackageName }));
          } else {
            return [];
          }
        })
        .catch((error) => {
          console.error("Error while obtaining list:", error);
          return [];
        });
    },
    // 当用户输入时返回下拉栏列表
    querySearch(queryString, cb) {
      // 调用后台接口获取List
      this.getFilterList().then((queryCompanyNameList) => {
        // results即为下拉列表数组
        let results = queryString
          ? queryCompanyNameList.filter(this.createFilter(queryString))
          : queryCompanyNameList;
        // 对结果数组进行去重
        const uniqueResults = results.reduce((acc, curr) => {
          // 判断当前结果是否已经存在于累积的结果数组中
          const exists = acc.some((item) => item.value === curr.value);
          if (!exists) {
            acc.push(curr);
          }
          return acc;
        }, []);
        // 调用 callback 返回下拉栏列表的数据
        console.log("// 调用 callback 返回下拉栏列表的数据", results);
        cb(results);
      });
    },
    // 返回过滤函数 
    createFilter(queryString) {
      return (item) => {
        // 对每一个数组里的对象{ value: item.couponPackageName }
        // 判断 item.couponPackageName是否包含输入的数据，toUpperCase()不区分大小写
        return item.value.toUpperCase().includes(queryString.toUpperCase());
      };
    },