vue中输入框带搜索建议的应用

element中
<el-autocomplete
style=“width: 250px;”
class=“inline-input”
popper-class=“poperstyle”
v-model=“mapdevice”
:fetch-suggestions=“querySearch”
placeholder=“输入设备名称/位置”
:trigger-on-focus=“false”
@select=“handleSelect”
clearable
>

data:return{
restaurants2:[],

},
methods:{
//最终选择的数据是完整的一条，可以用来后续的操作
handleSelect(val){
console.log(val)
this.latlonmap=[val.lon,val.lat]
this.onbyMapPoint=val
},
//过滤查询，数据restaurants2完整的信息可以在页面加载前就调用赋值
querySearch(queryString, cb) {
var restaurants = this.restaurants2;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
//具体过滤方法官网给出的
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
这样匹配出来的是输入内容为前缀的配置
//我下面的例子是只要饱和该输入内容的都匹配
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
}
注意的点：
1.restaurants2需要有value参数值，你可以循环把你需要检索的名称赋值给value即可
async getSourceDeviceListMap() {
var listQuerys = { pageNum: 1, pageSize: 2000 };
const res = await getSourceDeviceList(listQuerys);
res.data.records.forEach(item => {
item.value = item.machineName;
});
this.restaurants2 = res.data.records;
},
2.修改查询列表框的样式可以用
popper-class="poperstyle"来定义
3.支持clearable