vue+Element-ui input 远程搜索+模糊查询的实现（el-autocomplete）

---

前言

在本次项目中，需要完成根据用户输入学院的名称进行远程搜索的需求，刚开始使用的是官网上的形式，聚焦时拿到全部数据放到数组,然后当用户输入文字时循环该数组,将匹配的筛选出来,但是有些数据量太大了,几万条,考虑到性能问题,就由后台做模糊搜索,前端只需请求接口即可,后台返回匹配的数据.

---

template中的内容

<el-form-item label="学院" prop="academyId" >
          <div>
            <el-autocomplete
                v-model="academyName"
                :fetch-suggestions="academySearchAsync"
                placeholder="请输入学院名称"
                :trigger-on-focus="false"
                @select="handleAcademySelect"
            >el-autocomplete>
          div>
el-form-item>

data部分

academyName:"",
timeout:null,
academyData:[],
searchForm:{
 		academyId:"",
      },

method部分

academySearchAsync(queryString, cb) {
      if(queryString!='') {//输入框中有值
        this.loadAacdemy(queryString, (data) => {
          console.log(data);
          var results = queryString ? data.filter(this.createStateFilter(queryString)) : data;
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 5000*Math.random());
        })
      }
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase())>-1);
      };
    },
    handleAcademySelect(item) {
      this.searchForm.academyId=item.name;
    },
    loadAacdemy(query,fun) {//后台根据用户输入的内容进行模糊查询
      let url=this.urls.academyByLike
      let academies=[];
      this.axios({
        url:url,
        method:"POST",
        data:query
      }).then((res)=>{
        let code=res.data.code;
        if(code===200){
          this.academyData=res.data.data
          console.log(this.academyData)
          if(this.academyData.length>0){
            this.academyData.forEach((item)=>{
              academies.push({
                value:item.name,
                name:item.id
              })
            })
          }else{
            academies.push({
              value:"未找到相关结果",
              name:"未找到相关结果",
            })
          }
          fun(academies);
        }
      }).catch((error) => {
        console.log(error)
      })
    },

mybatis

<select id="getAcademyByLike" resultType="tech.niua.admin.yaoxue.domain.Academy">
        select id,name from dic_academy where name like #{param}
select>

需要注意的是，在service实现层，需要将前台传过来的内容更改为“%name%”的形式

@Override
    public List<Department> getAcademyByLike(String name) {
        String newName="%"+name+"%";
        return this.baseMapper.getAcademyByLike(newName);
    }