vue中实现input实时搜索

实现效果

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的博客-CSDN博客

vue中实现input实时搜索相关推荐

在vue中获取input上传图片的宽和高
在vue中获取input上传图片的宽和高上代码思路项目中有一个需求是需要上传190px*192px的png图片,一般直接在files.input[0]里面是找不到的,所以要变个思路了. 上代码 ...
SpringBoot+Es7.6.1+Jsoup+Vue+Docker打造古诗词实时搜索功能
文章目录服务安装下载安装elasticsearch 安装elasticsearch head插件新建索引安装Kibana 安装ik分词器 ElasticSearch基本操作操作说明常用操作 ...
vue 中的input
1. 限制小数位数 1.1 Vue 限制input输入小数点后两位number <input type="number" @keydown="keydownFn& ...
vue中的input使用e.target.value赋值的问题
很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...
vue中弹窗input框聚焦_Vue 中如何让 input 聚焦？(包含视频讲解)
作者:Michael Thiessen 译者:前端小智来源:laracasts.com 点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已 ...
vue2.0_在vue中实现input输入框的模糊查询
前言我们要实现的一个效果是,当输入框输入值时,显示数据列表框并将检索到的数据在列表框当中做展示. 模糊查询功能原理分析其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询,也就是说用 ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
vue中，input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考这里需用到vue修饰符不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
vue中带放大镜的搜索框
字体图标在input单标签中的用法: 第一步,先在main.js 中全局引入iconfont图标: 第二步,给input 标签动态绑定一个属性,设置值为data中的变量: 第三步,将字体图标代码中的 ...

vue中实现input实时搜索

vue中实现input实时搜索相关推荐

最新文章

热门文章