ElementUI的autocomplete组件+vue实现搜索联想(输入框提示)
select+autocomplete+buttom组件组合成一个带有选择的搜索框(其中slot 属性是就用来指定在 autocomplete 中前置或者后置内容。)<el-autocomplete :fetch-suggestions="querySearch" placeholder="请输入内容"@select="handleSelect" v-model="searchValue"
·
select+autocomplete+buttom组件组合成一个带有选择的搜索框( 其中slot 属性是就用来指定在 autocomplete 中前置或者后置内容。)
<el-autocomplete :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" v-model="searchValue" clearable class="input-with-select">
<el-select v-model="selectValue" slot="prepend" placeholder="请选择">
<el-option label="编号" value="id"></el-option>
<el-option label="姓名" value="username"></el-option>
<el-option label="微信/QQ" value="qq"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="selectSearch"></el-button>
</el-autocomplete>
vue:
data: {
tableData: {$listb},//绑定页面显示的数据,初始为原始数据
tableDataAll: {$listb},//保存原始数据
selectValue:"id",//选择器选择的内容,初始为编号
searchValue:null //搜索框输入的内容
},
初始的数据可以通过各种方式传进来,这个就看各自的需求了。
那么数据有了再写几个方法:
//搜索
selectSearch() {
if(this.searchValue!==null){
let arr = this.tableDataAll.filter(item => {
if(item[this.selectValue]==null){
item[this.selectValue]="";
return item[this.selectValue].indexOf(this.searchValue) !== -1;
}else{
return item[this.selectValue].indexOf(this.searchValue) !== -1;
}
});
this.tableData = arr;
}else{
this.tableData = this.tableDataAll;
}
},
//搜索联想
querySearch(queryString, cb) {
let programs = this.tableData;
let programList = [];
//从数据中拿出要联想的字段,并给它的名改成指定的{value:值}的格式才能正常显示
for(let i=0;i<this.tableData.length;i++){
programList.push({'value':programs[i][this.selectValue]})
}
let results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList;
//数据可能会存在重复的值,那么就不需要重复显示,所以调用下面写的去重方法
results = this.arrayReuse(results);
cb(results);//最后给到显示
},
//联想内容根据输入的搜索内容过滤
createStateFilter(queryString) {
return (program) => {
return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleSelect(item) {
this.searchValue = item.value;
},
//数组对象去重
arrayReuse(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
}
},
如果选择器的值改变了,那么输入框的内容得清空,既然搜索内容清空了,那么显示的数据也得是原数据吧,所以最后完善一下,给两个数据做个监听:
watch: {
searchValue(){
//搜索框内容改变(包括清空)就搜索
this.selectSearch();
//搜索框没输入或者清空了显示回原始的数据(和上面一种觉得哪种更适合就看情况用)
// if(this.searchValue == ""){
// this.tableData = this.tableDataAll;
// }
},
selectValue(){
//选择器一旦重新选择了,就让输入框的内容清空
this.searchValue = "";
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)