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

目录

实现基本功能

清空

编辑状态回填数据

展开下拉框

搜索指定内容

手动fetch-suggestions

---

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

实现基本功能

<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)
})