很常見的搜索框，很常用，總結一下，怕自己忘了,使用的是原生的js。
這是原生寫的，代碼很簡單，重要是思路。主要就是用了一個indexOf()，很簡單。越簡單的東西越難想到，很多人都會想到用正則去做，這樣就舍近求遠了。
html部分：
<div id="box">
<input type="text" id="txt" value = "">
<input type="button" id="btn" value="搜索">
</div>
javascript部分：
//創建假數據 var array=["aaa","abc","aab","acc","bcc","caa"];
// 判斷id為pop的div是否存在如果存在應刪除 ===========> 感謝 盛夏的永夜 的提醒
if (document.getElementById("pop")) {
divBox.removeChild(document.getElementById("pop"));
}
//獲取文本框注冊keyup事件 document.getElementById('txt').onkeyup=function(){ var divBox = document.getElementById('box'); //臨時數組 var tmpArray = []; //獲取數據源中的每一條數據 for(var i=0;i<array.length;i++){ //找到以你輸入的內容為開頭的所有數據 if(array[i].indexOf(this.value) === 0){ //將找到的數據push到臨時數組中 tmpArray.push(array[i]); } } //臨時數組為空時，不新建顯示框 if(tmpArray.length === 0){return;} //如果搜索框沒有值時也不新建顯示框 if(this.value.length === 0){ //如果此時已經有了顯示框，應該除去 if(document.getElementById("pop")){ divBox.removeChild(document.getElementById("pop")); } return; } //臨時數組有數據 var dvObj = document.creatElement("div"); dvObj.id = "pop"; //將div添加到box中 divBox.appendChild(dvObj); var ulObj=document.createElement("ul"); //將ul添加到dvObj中 dvObj.appendChild(ulObj); //遍歷臨時數組，動態創建li for(var i = 0;i<tmpArray.length;i++){ var liObj = document.createElement("li"); //將tr添加到ulObj中 ulObj.appendChild(liObj); //將臨時數組中的數據添加到li中 setinnerText(liObj,tmpArray[i]); } }
css的樣式沒有寫肯定會有問題，只能留給你們了，都寫完了，就沒意思了。我是一個喜歡留坑的人。