vue input输入框输入延时请求以过滤/筛选数据（时时搜索）

最新推荐文章于 2024-04-09 09:27:04 发布

原创最新推荐文章于 2024-04-09 09:27:04 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

vue_实例

9 篇文章

订阅专栏

本文介绍了一个前端搜索功能的实现方式，通过监听输入框的输入事件并使用setTimeout来防止频繁请求，实现了对输入内容的实时反馈。同时，文章还展示了如何过滤和显示与搜索关键词匹配的项，包括展位和公共设施等。

   <input
              type="text"
              @focus="searchFocus"
              class="inputfocus"
              v-model="searchValue"
              @input="changeInput()"//数据监听效果
              placeholder="搜索展位或是公共设施"
            />

 changeInput() {
      // console.log(this.searchValue);
      window.setTimeout(() => {//计时器以防不断请求
        this.itemArr = [];
        this.browses.map(item => {
          // console.log(this.searchValue);
          //==========过滤输入的东西
          if (this.searchValue != "") {
            this.serchEmpty = false;//设置显示/不显示v-if实现
            if (item.exhibitor && item.no) {
              if (item.exhibitor.includes(this.searchValue)) {
                // console.log(item);
                this.itemArr.push(item);
                console.log(this.itemArr);
              } else if (item.no.includes(this.searchValue)) {
                // console.log(item)
                this.itemArr.push(item);
                console.log(this.itemArr);
              }
            }
          } else {
            // console.log(this.serchEmpty);
            this.serchEmpty = true;//
            this.itemArr = [];
          }
        });
      }, 500);
    },