elementui实现远程搜索,模糊搜索

需求:模糊搜索,输入一个关键字弹出所有含有关键字的列表
实现:elementui的远程搜索实现,原先的做法是按照官网那样,聚焦时拿到全部数据放到数组,然后输入文字时循环该数组,将匹配的筛选出来,但是有些数据量太大了,几万条,考虑到性能问题,就由后台做模糊搜索,前端只需请求接口即可,后台返回匹配的数据.

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.toLowerCase().indexOf(queryString.toLowerCase())> -1);
    //后台已做筛选,不需再过滤
    return (restaurant.value)  };
},
//获取机型数据
getPlanTypeData(val,fun) {
  let dataArr = [];
  let para = {
    icaocode: val,
  };
  baseDataPlaneTypeList(para).then(res => {    //发送请求
    if (!res) return false;
    let dataList = res.data.pageInfo.list;
    if(dataList.length>0){
      dataList.forEach((item,index) => {
        dataArr.push({
          value:item.icaocode,
          name:item.cnfullname
        })
      });
    }else {
      dataArr.push({
        value:'无搜索结果',
        noId:'无搜索结果',
      })
    }
    fun(dataArr);
  });
},
//搜索选中
handleSelect(item) {
  if(item.name){
    this.$set(this.addForm,'jxdescribe',item.name);
  }
},

效果图: