elementui---带建议的输入框远程搜索
程序员文章站
2022-03-04 11:28:50
...
```javascript
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
restaurants: [],
state: '',
timeout: null
};
},
methods: {
querySearchAsync(queryString, cb) {
axios.get('url').then(res => {
var restaurants = res.data; // 获取全部信息
// 自带过滤器匹配(输入)信息
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
})
},
// 查询输入字符是否存在
createStateFilter(queryString) {
return (state) => {
//这里和elementui组件不一样
//value可以换成从后端传回的data数组中的键,
//queryString.toLowerCase()输入的字符在所有返回信息中存在,!==-1代表匹配到了搜索的字符
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleSelect(item) {
//返回的意见点击选择触发事件
console.log(item);
}
},
mounted() {
this.restaurants = this.loadAll();
}
};
</script>