element-ui输入框下拉远程搜索-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui输入框下拉远程搜索。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现效果：

可以在你输入的时候出现一个下拉，将你输入的东西与下拉框的内容进行匹配，然后下拉框会显示匹配的内容

element-ui输入框下拉远程搜索

相关代码：

:fetch-suggestions="querySearchAsync"是定义下拉内容的函数方法，restaurants是下拉框的内容，timeout这个定时器使用来决定多少秒后显示筛选后的内容

<el-autocomplete
   style="width: 100%"
   v-model="form.contacts"
   :fetch-suggestions="querySearchAsync"
   placeholder="请输入联系人"
   @select="handleSelect"
   value-key="contacts"
   >
</el-autocomplete>

  export default {
    data() {
      return {
        restaurants: [],
        timeout:  null
      };
    }
}

queryString是输入的内容，cb是显示下拉的回调，需要记住几点
1.在querySearchAsync中queryString和cb这样的形参最好不要去动，防止参数错误
2.在querySearchAsync中使用 cb(results);，可以将results中的数据进行显示在下拉框中
3.createStateFilter函数是用来匹配下拉与输入内容

  querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  };

后端已经有模糊匹配的时候就不用createStateFilter()来进行判断筛选

直接在querySearchAsync()中调用接口，拿返回值就行

    // 联系人搜索建议
    async querySearchAsync(queryString, cb) {
      const data = {
        contacts: queryString,
      };
      // 触发接口把数据给restaurants
      const { rows } = await DynamicPoint(data);
      this.restaurants = rows;
      let restaurants = this.restaurants;
      let results = restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300);
    },
    // 点击选中建议项时触发
    handleSelect(item) {
      this.$set(this.form, "contacts", item.contacts);
    },

使用过程中遇到的问题:

1. 如果使用value之外的键名来作为显示的内容，筛选功能就无法实现

2.result中的内容即下拉框的内容中value的值是显示的内容，如果不想使用value的值作为显示的内容，可以在标签中指定value-key来指定在result数组中的键名来进行显示。

遇到更新....文章来源地址https://www.toymoban.com/news/detail-454796.html

到了这里，关于element-ui输入框下拉远程搜索的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！