jquery自定义快速搜索（根据键盘输入，搜索）

最新推荐文章于 2020-09-16 10:22:09 发布

学海小周

最新推荐文章于 2020-09-16 10:22:09 发布

阅读量858

点赞数

分类专栏： javascript jquery

本文链接：https://blog.youkuaiyun.com/xuanlv_haoshao/article/details/79169900

版权

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

有时候在网上找的键盘输入搜索的控件，很多时候都会跟自己的项目冲突，所以自己写了一个，只需要引入jquery即可；例子代码如下（有用的需自己调整样式）：

html代码：

js代码如下：

/*
所用到的方法：
keyup：按键释放时触发。
数组.push():数组的放入方法
*/
var Arrays=["123","zh","ZH","zasdasd","哇哈哈","whwhwh"]
$(function(){
   $("#testDiv").css("height","500px");
   $("#testDiv").css("width","500px");
   $("#testDiv").css("border","1px solid #adadad");
   $("#testDiv").append("<div class='inputDiv'>"+
   "<input id='searchId' class='whole'></input></div>"+
   "<div id='dataDiv' style='width:100%;height:89%'></div>"
   );
   //初始化，将数据放入div中
   for (var idx in Arrays)
   {
       var cd=Arrays[idx];
       //单双行采用不同的样式
       var cls="s_cla"
       if(idx%2 != 0){
           cls="d_cla"
       }
       $("#dataDiv").append("<div class='"+cls+"'>"+cd+"</div>");
   }
   //捕捉键盘输入后的事件
   $("#searchId").keyup(function(){
       /*将输入框的值与搜索项的值均转化为大写，
       可以再搜索的过程中不区分大小写*/
       var inputVal=$(this).val().toUpperCase();
       var selArr=[];//存放搜索结果
       for (var idx in Arrays)
           {
               var cd=Arrays[idx];
               var cdCase=cd.toUpperCase();
               if(cdCase.indexOf(inputVal)!=-1){
                   selArr.push(cd);
               }
           }
       $("#dataDiv").html('');//清空原来的数据
       //重新渲染到数据div中
       for (var idx in selArr)
       {
           var cd=selArr[idx];
           //单双行采用不同的样式
           var cls="s_cla"
           if(idx%2 != 0){
               cls="d_cla"
           }
           $("#dataDiv").append("<div class='"+cls+"'>"+cd+"</div>");
       }
   });
});

效果如图所示：

初始化：

输入后：