vue实现输入框的模糊查询(节流函数的应用场景)

更新日期: 2019-09-06阅读: 2.6k标签: 输入框

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如: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拿到输入框的值,然后下面有一个ul列表,不过ul列表是判断展示的;

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次不管是在效率还是在性能方面都会是比较大的提升,用了节流函数之后相对上面没用的节流函数来说,我们极大的实现了性能提升、优化,所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的;

链接: https://fly63.com/article/detial/5676

通过js实现:input 限制输入数字和小数点

我们可以使用html5的type=number来限制input只能输入数字类型,但是会存在一定的兼容问题,而且在浏览器样式上会出现上下箭头的标示,显然这不是我们需要的,这篇文章就整理关于使用js来限制input的输入类型为数字和小数点的实现。

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?

textarea换行_在textarea中如何换行的实现总汇

html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?利用pre、替换 br 标签、直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre

纯css实现输入框placeholder动效及输入校验

话不多说,我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:

小程序批量监听输入框,对按钮样式进行控制

在input组件上绑定data-model=xxx bindinput=inputWatch,监听输入框输入:当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位)

js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.简单的调用:

如何清除input输入框历史下拉数据

当之前的input框输入了数据后,下次输入有历史记录。我们发现无论是清除cookie,还是删除浏览器历史记录,都没办法清空input下拉的历史记录信息。那么该如何解决该问题呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!