element UI input带输入建议el-autocomplete总结

小叶不耶

已于 2024-08-16 16:26:27 修改

阅读量409

点赞数 9

文章标签： ui vue.js javascript elementui

于 2024-08-16 16:20:10 首次发布

本文链接：https://blog.csdn.net/cdfdfgrd/article/details/141262788

版权

实现的是输入后提示

下面的是官方文档两个点要注意:特别是 cb(data) 返回到 autocomplete 组件中这个很重要必须是cb(data) cb换做任何一个都不行

先看全部代码

          <el-autocomplete
          v-model="form.accident_company"
          :fetch-suggestions="querySearch"
          placeholder="请输入详细单位名称"
          clearable
          @select="handleSelect"
          :trigger-on-focus="false"
          :value-key="'value'"  
          style="width: 230px;" 
        ></el-autocomplete>

 data() {
    return {
      accident_company:""
      companies: [] // 用于存储请求回来的公司信息数组
    };
    //
  },

    // 下拉搜索的方法
    querySearch(queryString,cb) {
      console.log(queryString)
    return new Promise(() => {
      // 清空之前的搜索结果
      this.companies = [];
      if (queryString) {
        searchUrl({ keyword: queryString }).then(response => {
          if (response.status === 1 && Array.isArray(response.info)) {
            this.companies = response.info.map(item => ({
              value: item.name || item // 假设存在 name 字段
            }));
            console.log(this.companies);
            cb(this.companies); 
          } else {
            console.error('API响应不正确或数据不是数组');
            cb([]); 
          }
        }).catch(() => {
          console.error('请求出错');
          cb([]); 
        });
      } else {
        cb(this.companies); 
      }
    });
  },
    // 下拉选项被选中时的事件
    handleSelect(item) {
      console.log("handleSelect",item);
      this.form.accident_company = item.value;
    },

起初没仔细看文档一直用的resolve(data)......搜索框的值一直显示不出来...

一定要先看文档!!!!