类似百度按关键字搜索的js效果实现

2019独角兽企业重金招聘Python工程师标准>>>

      最近项目中需要做一个类似百度的按关键字搜索的效果，初始在一个div中加载多个数据，然后对应的输入框中输入一些关键字后，下面的数据会按关键字进行筛选。实现的主要是键盘事件的应用和对相应dom结构的数据的匹配。

      首先关于input的html代码：<input type="text" class= 'chooseText' οnkeyup="chooseVideo.sift(this);" id="chooseText"></input>，键盘事件是onkeyup，即表示在此输入框输入字符时的键盘按起的所发生的事件。对应的此input输入框的div的html代码是：<div  class="check_false" id="check_false"></div>，也就是下面截图左边部分，实现把后台的关于数据的json串动态的创建加载到div中，然后再做选择。假页面截图如下：

            

     重置前的为关键字的输入框，下面左边的div为数据源，右边为已选择好的，都按后台的数据json串加载，在此已经实现双击左边的复选框内容，所选内容会自动移动到右边，双击右边类似。下面主要说下怎么实现的按关键字搜索的过程，下面为主函数：

 

chooseVideo.text='';
 chooseVideo.sift = function(input){

  if(input.value.length>0&&input.value!=this.text){
   this.text=input.value;    
   for(var i=0;i<check_false.childNodes.length;i++){
        if(check_false.childNodes[i].childNodes[1].innerHTML.indexOf(input.value)==-1){     
      check_false.childNodes[i].style.display = 'none';     
     }else{     
       check_false.childNodes[i].style.display = 'block';
     }        
    }  
  }
 }

     check_false.childNodes[i].childNodes[1].innerHTML.indexOf(input.value)==-1前半句就是dom操作查找到对应的数据，用indexOf函数查找输入框中的关键是否和已做循环的数据匹配，若匹配就保留数据，不匹配隐藏数据，如下图，当我输入高清是下面div会自动筛选出有高清关键字的数据： 

       

  input.value.length>0&&input.value!=this.text是为了数据的校正以防bug。

转载于:https://my.oschina.net/bothyan/blog/121548