vue实现输入框的模糊查询(节流函数的应用场景)
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢?
首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;
输入框的模糊查询功能原理分析
所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子;其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示;原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax连续多次触发,再加上如果我们的方法体中有操作DOM元素的方法,那么必然会给我们的浏览器进入假死甚至崩溃状态;那么我们有没有办法来解决此类问题呢?答案是:有的;(不了解模糊查询功能的同学可以出门右转去百度首页试一下搜索,给你5分钟,我等你回来)
HTML视图层代码:
<div id="app">
//输入框,绑定输入框的值是变量input_value的值,然后对输入框做了事件绑定keyup,在用户输入的时候会触发
<input type="text" placehold="请输入id进行查询" v-model="input_value" @keyup="throttle" ref="input"/> <ul v-show="state">
<li v-for="(item,index) in list" :key="index" >
<span>{{item.id}}</span>
<span>{{item.name}}</span>
<span>{{item.time}}</span>
</li>
</ul>
</div>
从上述代码中我们可以很明显的看到DOM结构,就是一个输入框,我们给输入框加了ref属性是为了方便我们后面操作DOM拿到输入框的值(详情可见ref和$refs的区别博文https://www.cnblogs.com/dengyao-blogs/p/11350292.html),然后下面有一个ul列表,不过ul列表是判断展示的;(至于为什么会用v-show而不是v-if,可以点击链接查阅之前的博文 https://www.cnblogs.com/dengyao-blogs/p/11378228.html);
js数据逻辑层代码:
// 实例化 vue对象
new Vue({
el:"#app",
data:{
input_value:"",
state:false,
statu:true,
dataList:[
{ id: "1001", name: "哈哈", time: "20170207" },
{ id: "1002", name: "呵呵", time: "20170213" },
{ id: "1103", name: "晓丽", time: "20170304" },
{ id: "1104", name: "小兰", time: "20170112" },
{ id: "1205", name: "财务", time: "20170203" },
{ id: "1206", name: "嘻嘻", time: "20170208" },
{ id: "1307", name: "测试", time: "20170201" }
],
list:[]
}, methods:{//触发keyup事件之后触发的方法
search(){
//这个变量主要是用来测试节流后和不节流的区别
var i=0;
console.log(i++);
//定义的新数组存放筛选之后的数据
this.list=[];
//拿到当前input输入框输入的值
this.input_value=this.$refs.input.value;
//判断展示ul列表,如果输入了就展示没输入就不展示
if(this.input_value.length>0){
this.state=true;
}else{
this.state=false;
} //循环模拟数据的数组
this.dataList.map((msg)=>{
//拿当前json的id、name、time去分别跟输入的值进行比较
//indexOf 如果在检索的字符串中没有出现要找的值是会返回-1的,所以我们这里不等于-1就是假设输入框的值在当前json里面找到的情况
if(msg.id.indexOf(this.input_value)!=-1 || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){
//然后把当前json添加到list数组中
this.list.push(msg);
}
})
},
}
})
js数据逻辑层代码其实不难,主要就是给input绑定了keyup事件,在用户输入的时候会触发search事件,用户每输入一个字符都会触发一次;然后我们通过this.$refs.input.value来获取输入框当前的值并赋值给变量this.input_value,然后我们对this.input_value的长度进行判断来实现对用户是否输入的判断,如果用户输入了我们就把v-show绑定的值state赋值给true,反之则赋值为false;然后我们来用ES6的map方法来循环我们的dataList数组,dataList数组的数据是模拟后台接口数据,通过indexOf方法是否等于-1来进行判断当前json里面是否有输入框中输入的数组,indexOf是javascript提供的操作字符串方法,调用方式:string.indexOf("要查询的值"),如果str中没有要查询的值会返回我们-1,如果有会直接返回给我们查询数据的当前下标;所以我们可以借助indexOf是否等于-1来进行判断当前json中是否有我们要查询的字符串;如果有的话,我们只需要把当前json添加到空数组list中即可,然后li绑定list展示;
效果图如下:
到这里我们就可以看到我们要的模糊查询功能已经实现了,但是我们上面讲到模糊查询会影响浏览器的性能,从控制台输入的变量i的值可以看到我们的search方法已经被调用了8次,我们输入的字符越长被调用的次数越多,如果方法里面有操作DOM的行为性能影响会更严重;所以我们现在来加上节流函数来看看:
//节流函数
throttle(){
//保持this的指向始终指向vue实例
var that=this;
if(!that.statu){
return;
}
that.statu=false;
setTimeout(function(){
console.log(new Date());
that.search();
that.statu=true;
},1000)
},
我们把我们写的节流函数封装在throttle里面执行,把@keyup绑定的点击事件修改为throttle,当用户输入字符的时候触发节流函数;效果图如下:
我们可以从控制台很清晰的看到当我们使用节流函数的时候,当我们输入了8个字符我们的方法只执行了两次,并且执行时间是每隔一秒执行一次,一个方法执行2次肯定会比执行8次不管是在效率还是在性能方面都会是比较大的提升,用了节流函数之后相对上面没用的节流函数来说,我们极大的实现了性能提升、优化,所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的;
vue实现输入框的模糊查询(节流函数的应用场景)的更多相关文章
- vue实现手机号码的校验(防抖函数的应用场景)
上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的 ...
- vue实现input输入框的模糊查询
最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...
- vue中input输入框的模糊查询实现
最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...
- mongodb3.2系统性学习——5、游标 模糊查询 findAndModify函数
1首先介绍查询结果 返回的过程: 进行查询的时候mongodb 并不是一次哪个返回结果集合的所有文档,而是以多条文档的形式分批返回查询的结果,返回文档到内存中. 好处: 减少了客户端与服务器端的查询负 ...
- vue 如何实现 Input 输入框模糊查询方法
原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...
- 编写简易的JS输入框模糊查询匹配(附有源码和demo)
前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...
- SQL Server数据库--》top关键字,order by排序,distinct去除重复记录,sql聚合函数,模糊查询,通配符,空值处理。。。。
top关键字:写在select后面 字段的前面 比如你要显示查询的前5条记录,如下所示: select top 5 * from Student 一般情况下,top是和order by连用的 orde ...
- sql sever模糊查询和聚合函数
使用is null 的时候 要确保 查询的列 可以为空! null: 01.标识 空值 02.不是0,也不是空串"" 03.只能出现在定义 允许为null的字段 04.只 ...
- SQL Server数据库————模糊查询和聚合函数
***********模糊查询*********/ 关键字: like (!!!!字符串类型) in (,,) 匹配()内的某个具体值(括号里可以写多个值) between... and.. 在某两 ...
随机推荐
- SpringMVC简易架构图。。。
DispatcherServlet拦截所有请求 -> 通过访问url路径找到对应的控制器 -> 通过适配器调用控制器的方法 -> 控制器里面的方法处理业务 -> 通过视图解析器 ...
- java数组扩容
有些时候使用数组代替栈,玩意数组容量不够需要扩容 则: 1.Array.toString();直接遍历打印数组 2.数组扩容采用Array.copyOf(),直接实现数组扩容功能,非常强大 (实际 ...
- supervisor指南
1 安装 yum install -y supervisor 如果提示没有这个安装包,则需要添加epel源 wget -O /etc/yum.repos.d/epel.repo http://mirr ...
- 【Sublime】设置显示编码格式
Mac 上的 Sublime 显示编码格式,设置方法: 右下角显示的 UTF-8 就是当前的编码格式. 添加如下代码: { "font_size": 18, // Display ...
- 【Android】SDK Manager 设置代理
这里是 Mac 系统下,Windows 环境类似.打开 Android SDK Manager, Proxy Settings 设置如下所示: PS: 注意勾选 "Force https:/ ...
- 【POJ - 1862】Stripies (贪心)
Stripies 直接上中文了 Descriptions 我们的化学生物学家发明了一种新的叫stripies非常神奇的生命.该stripies是透明的无定形变形虫似的生物,生活在果冻状的营养培养基平板 ...
- idea 2018.3.4安装破解
电脑环境:win10 64位 1.idea官网下载: 链接:https://www.jetbrains.com/idea/,如下图: 2.JDK官网下载: 链接:https://www.oracle. ...
- Android 虹软人脸识别SDK-人脸对比
准备 : 登录官方网站,获取SDK,进行个人验证后新建项目,获取APP_ID,和SDK_KEY: https://ai.arcsoft.com.cn/ucenter/resource/build/in ...
- 十分钟带你看一遍ES6新特性
let , const关键字 var 看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期 js的var关键字,无论在何处声明,都会被视为声明在 ...
- java学习-NIO(一)简介
I/O简介 在 Java 编程中,直到最近一直使用 流 的方式完成 I/O.所有 I/O 都被视为单个的字节的移动,通过一个称为 Stream 的对象一次移动一个字节.流 I/O 用于与外部世界接触. ...