组件
<el-autocomplete
v-model="name"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
style="width:100%"
clearable
@clear="blurForBug()"
></el-autocomplete>
实时查询,输入文字后调用接口
//在data中定义一个定时器
timer:null,
//获取下拉数据
querySearchAsync(queryString, cb) {
let param = {
name: queryString,
};
this.$api
.findWbdLocnByWh(param)
.then(res => {
if (res.data.code == "0") {
let result = res.data.data.map(item => {
return {
value: item.name,
...item
};
});
//规定在输入完一个字符后,如果300ms内没有继续输入,那么300ms后就发送一次请求;如果在300ms内继续输入了内容,那么就会删除上次定时器,重新开始计时,直到300ms内没有继续输入时再发送请求。这样就减少了一些不必要的请求
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
cb(result)
}, 300);
}
})
.catch(error => {});
},
// 点击clearable清空小图标按钮以后,继续重新在输入框中输入数据,querySearch会触发,但是cb函数不会触发
// 这样的话就会出现发请求了,也获取数据了,但是input框的输入建议下拉框不呈现在页面上的问题,所以解决方法就是
blurForBug(){
document.activeElement.blur()
},
不实时调用接口,直接前端过滤
//输入后匹配
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//获取数据
getList(){
let params = {
};
this.$api
.findWbdLocnByWh(param).then((res) => {
if (res.data.success) {
this.restaurants=[]
res.data.data.forEach(item => {
this.restaurants.push({
value: item.name,
})
})
} else {
}
})
.catch((res) => {
});
},