实现这个功能,在网上找了很多感觉都不太准确,残缺不全,这里做个总结
完整代码
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect">
</el-autocomplete>
<script>
export default {
data() {
return {
restaurants: [],//后端获取的数据
state: '', //输入框输入的双向绑定的数据
}
}
mounted() {
this.loadAll()
},
methods: {
//获取后端数据的接口
loadAll() {
let that = this
that.$axios.get(that.baseURL+'PROD/testdialog/documents/')
.then(function(res){
if (res.data.code===1){
that.restaurants = res.data.data
// console.log(res.data.data)
}else{
// 失败的提示
that.$message.error(res.data.msg)
}
})
.catch(function(err){
console.log(err)
})
},
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()) > -1);
};
},
handleSelect(item) {
console.log(item);
},
}
</script>
这里要强调两点:
(1)
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
},
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
//这里大于-1可以实现模糊查询,比如你输入 git 那么git getgit gitout都可以查询到
//如果你这里是 return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);
//当你输入 git 那么只能显示git gitout 而getgit查询不到 只能以要搜寻的条件为开头
(2)
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
//这里的value要和你后端返回的key对应,也就是说你后端返回的数据的key要是value,不要随便改一个,前端会拿不到数据,至于为什么我也不清楚,反正可以实现