vue如何在手机端实现边输入边搜索数组,然后过滤数组?

vue如何在手机端实现边输入边搜索数组,然后过滤数组?

阅读 118
评论
    2 个回答

    看你搜索的条件
    简单写一个方法 假如你按 name搜索

    getFilterData(){

    this.list = this.list.filter(item=>item.name.includes(key))//key 是你搜索的关键字

    }

    另外 这个方法 最好加个 防抖函数 避免频繁输入影响性能.参考 lodash _debounce

      <input
        type="text"
        v-model="keyword"
        class="search-input"
        placeholder="输入进行搜索"
        @keyup="endInput"
      />
      
         // 键盘抬起时,模糊查询关键词
          endInput() {
            if (this.keyword.length > 0) {
            // 输入时的操作,根据输入查询符合条件的数组渲染到列表中去,allList表示所有数据,searchList表示搜索结果数组
              this.searchList = this.fuzzyQuery(this.allList, this.keyword) // 使用 this.allList.filter(x => x.label && x.label.includes(this.keyword)) 效果相同
            } else {
              //无输入的操作
            }
          },
          // 模糊查询事件
          fuzzyQuery(list, keyWord) {
            const reg = new RegExp(keyWord)
            const arr = []
            //循环每一项,找到符合条件的
            for (let i = 0; i < list.length; i++) {
              if (reg.test(list[i].label)) {
                arr.push(list[i])
              }
            }
            return arr
          }
      
        撰写回答

        登录后参与交流、获取后续更新提醒