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.jb51.net/article/167643.htm），然后下面有一个ul列表，不过ul列表是判断展示的；（至于为什么会用v-show而不是v-if，可以点击链接查阅之前的博文
https://www.jb51.net/article/168984.htm）；
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展示；
效果图如下：
weixin_38741540
- 粉丝: 6
- 资源: 961
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- 2023年中国辣条食品行业创新及消费需求洞察报告.pptx
- 2023年半导体行业20强品牌.pptx
- 2023年全球电力行业评论.pptx
- 2023年全球网络安全现状-劳动力资源和网络运营的全球发展新态势.pptx
- 毕业设计－基于单片机的液体密度检测系统设计.doc
- 家用清扫机器人设计.doc
- 基于VB+数据库SQL的教师信息管理系统设计与实现 计算机专业设计范文模板参考资料.pdf
- 官塘驿林场林防火（资源监管）“空天地人”四位一体监测系统方案.doc
- 基于专利语义表征的技术预见方法及其应用.docx
- 浅谈电子商务的现状及发展趋势学习总结.doc
- 基于单片机的智能仓库温湿度控制系统 (2).pdf
- 基于SSM框架知识产权管理系统 (2).pdf
- 9年终工作总结新年计划PPT模板.pptx
- Hytera海能达CH04L01 说明书.pdf
- 数据中心运维操作标准及流程.pdf
- 报告模板 -成本分析与报告培训之三.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0