在之前的那篇博客中我介绍了input做模糊查询的时候出现由v-for生成多个组件的时候怎样传index的问题。解决了大部分问题但是在是用的时候还是出现了其他bug所以在这里在记录下
官网给出的例子是这样的:
在template里面:
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
在data中
data() {
return {
restaurants: [],
state: '',
timeout: null
};
},
在methods中
querySearchAsync (queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
cb(results)
},
createStateFilter (queryString) {
return (state) => {
return (
state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
)
}
},
handleSelect (item) {
console.log(item)
},
具体的可以在elementui官网查看
官网这样我们看着实现了模糊查询但是呢,只能按照搜索内容的文字顺序搜索。没有真正意义上做到模糊查询。仔细看过方法后是createStateFilter()
这个方法里的state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
需要改造下改为state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
因为这个方法里的indexOf() === 0
这块是下标等于0,而我们是要做真正的模糊查询所以我们需要改为indexOf() !== -1
什么意思呢?就是有,存在的时候就查询。