vue框架中search搜索功能的实现

``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);
 */
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值