搜索框实时输入搜索

最新推荐文章于 2024-07-16 11:07:16 发布

原创最新推荐文章于 2024-07-16 11:07:16 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

代码总结专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在前端实现搜索框的实时搜索功能，通过监听键盘keyup事件和焦点变化，利用时间差来判断是否进行搜索，当用户停止输入时自动停止搜索操作。

输入时搜索，停下时停止搜索，利用时间差比较keyup和focus值的不同。

    search:function(){

        var inputevent;
        var _this=this;
        var status=true;
        $('.nicknamesearch').focus(function(event){

              inputevent=setInterval(function(){

                  if(event.target.value!="" && event.target.value!=_this.valueb && status){

                      status=false;
                      customIndex.ajaxData(event.target.value);

                  }

                  if(event.keyCode==32){
                      
                      setTimeout(function(){
                          var value=event.target.value;
                          customIndex.ajaxData(value);
                      },50)
                      
                  }

                  if(event.target.value==""){
                       $('#userHtml').empty()
                  }

              },10);
        })

        $('.nicknamesearch').keyup(function(event){

            if(event.keyCode==32){
               return false
            }
            setTimeout(function(){
                _this.valueb=event.target.value;
                status=true;
                
            },500)
             
        })

        $('.nicknamesearch').blur(function(event){

             clearInterval(inputevent);
             inputevent=null
        })

    },