标签:我不知道 搜索 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 =""; }; }
标签:我不知道 搜索 var js代码 www. doc htm function 输入框
原文地址:https://www.cnblogs.com/ash-sky/p/9577726.html