Vue ElementUI中使用<el-autocomplete>标签实现远程搜索下拉框并实现自动填充功能 [ 技术杂谈 ]
九叶的小窝 文章 正文
九叶
{{nature("2021-05-28 12:38:19")}}更新在elementui Input输入框中可以找到远程搜索组件 获取服务端的数据
在template中添加el-autocomplete
<el-autocomplete
class="inline-input"
v-model="queryParams.unloadingPointName"
clearable
:fetch-suggestions="querySearchAsync"
size="small"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleQuery"
></el-autocomplete>
在script methods中添加以下函数
//queryString 为在框中输入的值
//cb 回调函数,将处理好的数据推回
querySearchAsync(queryString, cb) {
let unloadPointList = this.unloadPointListAll;
unloadPointList = JSON.parse(JSON.stringify(this.unloadPointListAll).replace(/unloadingPointName/g,"value"));
console.log(unloadPointList)
let results = queryString ? unloadPointList.filter(this.createStateFilter(queryString)) : unloadPointList;
console.log('results')
console.log(queryString)
console.log(results)
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 0.5*1000);
},
//根据输入的字段进行筛选
createStateFilter(queryString) {
return (state) => {
console.log(state)
return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
选中即可补全
后台获取的数据对象必须有value关键字,因为autocomplete只识别value字段,这里有一个实现的小方法
unloadPointList = JSON.parse(JSON.stringify(this.unloadPointListAll).replace(/unloadingPointName/g,"value"));
JSON.stringify()
方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以替换值,或者如果指定了replacer是一个数组,可选的仅包括指定的属性。这样我们就可以把自己的属性都替换成value字段啦
{{nature('2021-12-07 15:29:00')}} {{format('2428')}}人已阅读
{{nature('2021-01-31 20:01:00')}} {{format('1041')}}人已阅读
{{nature('2020-12-11 21:17:00')}} {{format('957')}}人已阅读
{{nature('2021-04-22 15:16:00')}} {{format('936')}}人已阅读
目录
标签云
一言
评论 0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}