案例：模擬百度搜索
阿新 • • 發佈：2018-12-20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; padding: 0px; width: 200px; list-style-type: none; } #pop ul li { } </style> </head> <body> <div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜尋" id="btn"> </div> <script src="common.js"></script> <script> var keyWords = ["小楊才是最純潔的", "小楊才是最帥的", "小段是最猥瑣的", "小超是最齷齪的", "傳智播客是一個培訓機構", "傳說在傳智有個很帥很純潔的小楊", "蘋果好吃", "蘋果此次召回還是沒有中國"]; //獲取文字框註冊鍵盤擡起事件 my$("txt").onkeyup = function () { //每一次的鍵盤擡起都判斷頁面中有沒有這個div if(my$("dv")){ //刪除一次 my$("box").removeChild(my$("dv")); } //獲取文字框輸入的內容 var text = this.value; //臨時陣列--空陣列------->存放對應上的資料 var tempArr = []; //把文字框輸入的內容和陣列中的每個資料對比 for (var i = 0; i < keyWords.length; i++) { //是否是最開始出現的 if (keyWords[i].indexOf(text) == 0) { tempArr.push(keyWords[i]);//追加 } } //如果文字框是空的,臨時陣列是空的,不用建立div if (this.value.length == 0 || tempArr.length == 0) { //如果頁面中有這個div,刪除這個div if (my$("dv")) { my$("box").removeChild(my$("dv")); } return; } //建立div,把div加入id為box的div中 var dvObj = document.createElement("div"); my$("box").appendChild(dvObj); dvObj.id = "dv"; dvObj.style.width = "350px"; //dvObj.style.height="100px";//肯定是不需要的------ dvObj.style.border = "1px solid green"; //迴圈遍歷臨時陣列,建立對應的p標籤 for (var i = 0; i < tempArr.length; i++) { //建立p標籤 var pObj = document.createElement("p"); //把p加到div中 dvObj.appendChild(pObj); setInnerText(pObj, tempArr[i]); pObj.style.margin = 0; pObj.style.padding = 0; pObj.style.cursor = "pointer"; pObj.style.marginTop = "5px"; pObj.style.marginLeft = "5px"; //滑鼠進入 pObj.onmouseover = function () { this.style.backgroundColor = "yellow"; }; //滑鼠離開 pObj.onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script> </body> </html>