vue框架中search搜索功能的实现
``watch监视属性方法:watch:{keyword(){//用到了节流函数 进行判断这个值(数据是否存在),监听的是keyword值的变化,if(this.timer){clearTimeout(this.timer)}if(!this.keyword){//如果搜索的内容不存在,则返回一个空数组this.list=[]return}this.timer = setTimeout(()=&g
·
``watch监视属性方法:
watch:{
keyword(){
//用到了节流函数 进行判断这个值(数据是否存在),监听的是keyword值的变化,
if(this.timer){
clearTimeout(this.timer)
}
if(!this.keyword){//如果搜索的内容不存在,则返回一个空数组
this.list=[]
return
}
this.timer = setTimeout(()=>{
const result = []
for (let i in this.cities){ //cities就是用props接收的值
this.cities[i].forEach((value)=>{
//判断是否存在
if(value.spell.indexOf(this.keyword)>-1||
value.name.indexOf(this.keyword)>-1{
//追加到result中
result.push(value)
}
})
this.list = result
},100)
}
//methods方法:
search_btn() {
let search = this.searchText;
let olddatas = this.content; //旧数据
if (search == '') {
this.content = olddatas;
} else {
this.content = this.content.filter(function (item) {
console.log('过滤', item);
let searchField = {
//我这里把item里面所有字段写进去了
wordName: item.wordName,
attr: item.attr,
addUser: item.addUser,
addDate: item.addDate,
desc: item.desc,
wordId: item.wordId,
};
return Object.keys(searchField).some(function (key) {
console.log('key值', key);
return String(item[key]).toLowerCase().indexOf(search) > -1;
});
});
}
return this.content;
/*
if(this.selectVal===''||this.selectVal==null){
this.content=JSON.parse(JSON.stringify(this.content));
return;
}
//搜索
let content=this.content.filter(item=>item.indexOf(this.searchText)>=0);
*/
},
更多推荐
已为社区贡献1条内容
所有评论(0)