需求:模糊搜索,输入一个关键字弹出所有含有关键字的列表
实现:elementui的远程搜索实现,原先的做法是按照官网那样,聚焦时拿到全部数据放到数组,然后输入文字时循环该数组,将匹配的筛选出来,但是有些数据量太大了,几万条,考虑到性能问题,就由后台做模糊搜索,前端只需请求接口即可,后台返回匹配的数据.
<el-autocomplete
class="inline-input mediaInput"
size="mini"
v-model="addForm.jx"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
:trigger-on-focus="false"
></el-autocomplete>
<!--trigger-on-focus 是否在输入框 focus 时显示建议列表-->
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); } },
效果图: