前端搜尋js

標籤：我不知道   搜尋   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