ElementUi使用el-autocomplete实现搜索建议(无数据匹配+点击clearable清除,不触发下拉选项)
ElementUi使用el-autocomplete实现搜索建议(无数据匹配+点击clearable清除,不触发下拉选项)
·
先上效果图:
首先没输入的情况下是这样
如果有匹配选项是这样
匹配不到是这样
在使用过程中发现,element的el-autocomplete组件是不支持没有数据的时候提示无匹配数据的,如果要设置成可关闭的,发现点击关闭后,如果还是在聚焦状态,再次输入是不触发输入建议的,如下图:
代码如下:
<el-form-item label="平台名称">
<el-autocomplete
ref="el_auto" // 为了解决关闭后不匹配
v-model="platformName"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
:clearable="true"
:popper-class="noData ? 'platform-auto-complete' : ''"
value-key="platformName" // 输入建议对象中用于显示的键名,默认是value
class="inline-input"
placeholder="请输入上报平台关键字"
@select="handleSelect"
@clear="clearSelect"
>
// 解决匹配不到提示无匹配数据
<template v-if="noData" slot-scope="{ item }">
<div class="default">{{ item.default }}</div>
</template>
</el-autocomplete>
</el-form-item>
data(){
return{
platformName:'',
platformList: [], // 平台列表
noData: false // 是否匹配到数据了
}
},
methods:{
querySearch(queryString, callback) {
let matchResults = queryString ? this.platformList.filter(this.createFilter(queryString)) : this.platformList;
this.noData = false
if (matchResults.length === 0) {
matchResults = [{default: '无匹配数据'}]
this.noData = true
}
// 调用 callback 返回建议列表的数据
callback(matchResults);
},
createFilter(queryString) {
return platform => {
return (
platform.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
);
};
},
handleSelect(val) {
this.searchForm.platformId = val.platformId
},
// 看element源码发现,在点击关闭时,发现把activated 置为false了
clearSelect() {
this.$refs.el_auto.activated = true
// 方法二:让输入框失去焦点
// document.activeElement.blur()
}
}
这里说一下:对于点击关闭后,再次输入触发不了输入建议,是因为elementui源码有bug,图片如下:
解决主要有两种思路:第一种是给组件添加一个ref,在执行清除事件的时候,把activated置为true
第二种就是让输入框失去焦点,就是document.activeElement.blur()
activeElement 属性返回文档中当前获得焦点的元素。
另外:还需要给无匹配数据时修改样式,要不然就是可点击的,图片如下:
<style lang="scss">
.platform-auto-complete {
.el-autocomplete-suggestion__wrap {
padding: 5px 0;
ul li {
pointer-events:none; // 阻止可点击事件
.default {
text-align: center;
color: #999;
}
&:hover{
background-color: #fff;
}
}
}
}
另外用这个组件还需要注意,如果el-autocomplete接受的数组对象里面没有value属性,就需要用value-key(输入建议对象中用于显示的键名)可以指定对应的key,如果不用value-key,那就需要处理数组,给数组加上一个value的key,要不然输入建议显示不出来,如下图
更多推荐
已为社区贡献9条内容
所有评论(0)