elementui——带建议的输入框远程搜索
<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) => {
**
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleSelect(item) {
console.log(item);
}
}
};
</script>