element-ui的input框实现远程搜索,模糊搜索

 

1.html

      <el-form-item label="位置:">
        <el-autocomplete
          class="search-input"
          v-model="queryData.location"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
          :trigger-on-focus="false"
        ></el-autocomplete>
      </el-form-item>

2.data

     queryData: {
        location: "美国"
      },

3.js

    //国家搜索(模糊搜索)
    querySearch(queryString, cb) {
      if (queryString != "") {
        this.getPlanTypeData(queryString, (data) => {
          let results = "";
          if (queryString && !data[0].noId) {
            //输入框有值且有匹配数据时
            results = data.filter(this.createFilter(queryString));
          } else {
            //没有匹配数据时显示自定义的字段
            results = data;
          }
          cb(results);
        });
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        //后台已做筛选,不需再过滤
        return restaurant.value;
      };
    },
    //获取国家数据
    async getPlanTypeData(val, fun) {
      let dataArr = [];
      let name = val;
      const { data } = await this.$axios.post(
        "/api/thor/keywords/locationlist",
        {
          name,
        }
      );
      if (data.code === 200) {
        let dataList = data.data;
        // console.log("国家地区", dataList);
        if (dataList.length > 0) {
          dataList.forEach((item, index) => {
            dataArr.push({
              value: item.location_name,
              name: item.id,
            });
          });
        } else {
          dataArr.push({
            value: "未找到相关结果，换个词试试",
            noId: "未找到相关结果，换个词试试",
          });
        }
        fun(dataArr);
      }
      // });
    },
    //获取选中的国家地区
    handleSelect(item) {
      this.locationId = item.name;
      if (item.name) {
        this.$set(this.queryData, "jxdescribe", item.name);
      }
    },