码迷,mamicode.com
首页 > Web开发 > 详细

前端搜索js

时间:2018-09-03 13:36:24      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:我不知道   搜索   var   js代码   www.   doc   htm   function   输入框   

html代码:

<input type="text" id="txt" oninput="Testing(this.value)"/>    //输入框值改变时执行方法Testing(this.value)传入输入框当前的值

<
div id="box"> <ul> <li>新闻</li> <li>广告</li> <li>热线</li> <li>电话</li> <li>网站</li> <li>企业</li> </ul> <div id="box2"></div> </div>

js代码:

function Testing(data){
  var aLi = document.getElementsByTagName("li");   //获取所有的li
  var odiv = document.getElementById("box2");      //获取你查询出来的li摆放容器
  var arry =[];                                    //存储符合查询条件的索引
  box2.innerHTML ="";                  //初始化摆放容器         
  for(var i = 0; i < aLi.length;i++ ){            //把符合查询条件值的索引存入数据arry
    if(aLi[i].innerText.indexOf(data) != -1){    //返回-1,代表没有找到该值
      arry.push(i);
    }
  };
  for(var i = 0; i < arry.length ; i++){       //把查询到的值放入摆放容器。
    box2.innerHTML += "<li><a href =‘"+ "https://www.baidu.com" +"‘ >"+aLi[arry[i]].innerHTML+"</a></li>"
  };
  if(data == ""){                     //再次初始化摆放容器(如何不初始化,输入后,全部删除,会显示最后一个li,抱歉!我不知道为啥)
  box2.innerHTML ="";
  };
}

 

前端搜索js

标签:我不知道   搜索   var   js代码   www.   doc   htm   function   输入框   

原文地址:https://www.cnblogs.com/ash-sky/p/9577726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!