vue中实现input实时搜索

最新推荐文章于 2025-03-19 12:15:51 发布

咕噜咕噜掉下mysta

最新推荐文章于 2025-03-19 12:15:51 发布

阅读量3.1k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_43777572/article/details/126054662

版权

该博客介绍了如何在Vue.js项目中结合ElementUI实现input输入框的实时搜索功能，通过监听input事件更新数据列表，并在搜索结果中高亮显示关键词。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

html

 <el-input v-model="listQuery.tQuery" @input="searchEvent" 
   clearable size="small" placeholder="请输入您的问题..." 
   prefix-icon="el-icon-search"  @change="handleHuaFilter"
   class="filter-item" style="width: 255px"/>
 <el-button @click="handleHuaFilter()" class="filter-item" 
   size="small" type="success" icon="el-icon-search">搜索</el-button>

methods:

clearTimer() {
        if (this.timer) {
          clearTimeout(this.timer);
        }
      },

searchEvent () {
        this.clearTimer();
        if (this.listQuery.tQuery && this.listQuery.tQuery.length > 0) {
        //获取当前延时函数的ID，便于后面clearTimeout清除该ID对应的延迟函数
        this.timer = setTimeout(() => {
           this.getList();
          }, 500);
        } else {
          this.getList(); //查询
        }
      },

getList() {
        this.listLoading = true;
        this.$axios.posts("/api/Doc/Query",this.listQuery) //根据自己的接口查询
          .then((response) => {
            this.list = response.result.items;
            this.listLoading = false;
          });
      },

list是查询数据里面data table里面 :data="list"

参考其它博主(6条消息) 【Vue.js】基于vue的实时搜索，在结果中高亮显示关键词_ass201295的博客-优快云博客