前端搜索js

Posted 2021-01-03 ash-sky

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 ="";
  };
}