【ElementUI】el-autocomplete 远程搜索自动填充

宾果的救星

已于 2022-11-17 09:46:27 修改

阅读量1.9k

点赞数 2

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

于 2022-09-13 10:52:22 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/124673271

版权

Element 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

本文详细介绍了在Vue.js中如何实现Autocomplete组件，包括基础功能如清空、编辑状态回填、展开下拉框、搜索指定内容及手动触发建议列表。通过两种不同的数据获取方式，展示了如何在大量客户数据中进行实时匹配和筛选。同时，讨论了如何处理编辑状态的回填、清空聚焦等细节问题，确保组件的正常工作。

摘要由CSDN通过智能技术生成

工作需求：在存在大量客户的情况下，输入姓名中的任意字可以匹配相关联的姓名。以下是按照官网实现。

实现基本功能

<el-autocomplete
  ref="autocomplete"
  class="autocomplete"
  v-model="form.name"
  :fetch-suggestions="querySearch"
  clearable
  placeholder="请选择客户"
  @select="choose_memebr"
  @clear="blur_memebr()"
></el-autocomplete>

获取数据方式一：进入页面就获取完整数据，后面再自己对数据进行筛选。

data() {
  return {
    form:{
        name:'' // 展示的选中姓名
    },

    list:[],// 所有数据
    
    member: {}, // 选中的客户信息
  };
},  
created() {
    this.getlist()
},
method:{
  getlist() {
    getData({
      url:'/member',
      data: {},
    }).then((res) => {
      const {
        code,
        data: {
          list: { data },
        },
      } = res;
      if (code === 200) {
        data.map((e) => {
          e.value = `${e.user.name}(${e.user.phone})`;
        });

        this.list = data
      }
    });
  }
  // 获取数据
  querySearch(queryString, cb) {
    var restaurants = this.list;
    var results = queryString
       ? restaurants.filter(this.createFilter(queryString))
       : restaurants;
    // 调用 callback 返回建议列表的数据
    cb(results);
  },

  // 筛选
  createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
  },

  // 选中，然后进行其他操作
  choose_memebr(item) {
    this.member = item;
  },

  // 清空
  blur_memebr(item) {
    this.member = {
        id: "",
        value: ""
    };
    document.activeElement.blur() // 清空聚焦
  },
}

获取数据方式二：每次都调用接口进行筛选

data() {
  return {
    form:{
        name:'' // 展示的选中姓名
    },
    
    member: {}, // 选中的客户信息
  };
},  
method:{

  // 获取数据
  querySearch(queryString, cb) {
    getData({
      url:'/member',
      data: {
        search: queryString,
      },
    }).then((res) => {
      const {
        code,
        data: {
          list: { data },
        },
      } = res;
      if (code === 200) {
        // 只匹配value的值
        data.map((e) => {
          e.value = `${e.user.name}(${e.user.phone})`;
        });

        // 调用 callback 返回建议列表的数据
        cb(data);
      }
    });
  },


  // 选中，然后进行其他操作
  choose_memebr(item) {
    this.member = item;
  },

  // 清空
  blur_memebr(item) {
    this.member = {
        id: "",
        value: ""
    };
    document.activeElement.blur() // 清空聚焦
  },
}

清空

添加clearable 和@clear的方法blur_member：
blur_member：当前获得焦点的元素失去焦点，el-autocomplete清空后才能正常使用，同时要把所选的项目清空。

document.activeElement ：获取当前获得焦点的元素

blur_memebr(item) {
  document.activeElement.blur() // 清空聚焦
},

编辑状态回填数据

this.form.member = `${v.name}`
this.member = {
  id: v.id,
  value: v.name
}

展开下拉框

nextTick(()=>{
    this.$refs.autocompletet.activated = true
})

搜索指定内容

this.$refs.autocomplete.getData( this.form.name)

手动fetch-suggestions

nextTick(()=>{
    this.$refs.autocompletet.activated = true
    this.$refs.autocomplete.getData( this.form.name)
})