模擬百度搜索框 我的思路整理： 1. 註冊文本框抬起事件(onkeyup) 2. 處理函數： >創建臨時數組，迴圈遍歷文本框鍵入的文字內容和keywords數組，用keyWords[i].indexOf(text) == 0 來判斷，true就追加進臨時數組tempArr.push(keyWords ...
模擬百度搜索框
我的思路整理：
1. 註冊文本框抬起事件(onkeyup)
2. 處理函數：
--->創建臨時數組，迴圈遍歷文本框鍵入的文字內容和keywords數組，用keyWords[i].indexOf(text) == 0 來判斷，true就追加進臨時數組tempArr.push(keyWords[i])
--->bug修複：每一次鍵盤抬起，都判斷頁面有沒有div，有就刪除
--->何時出現div：判斷條件：當文本框為空，或臨時數字空，不創建div，如果有div，就刪除
--->創建div, div加到box, div設置樣式 ; 迴圈遍歷創建p，p加入新建的div；加入滑鼠進入和移開的樣式（在迴圈裡面，用命名函數，減少負荷）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } </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")); } //輸入的內容，即文本框裡面的內容，和keywords去對比 //獲取文本框輸入的內容 var text = this.value; //臨時數組--空數組------->存放對應上的數據 var tempArr = []; //把文本框輸入的內容和數組中的每個數據對比 for (var i = 0; i < keyWords.length; i++) { //是否是最開始出現的 if (keyWords[i].indexOf(text) == 0) { tempArr.push(keyWords[i]);//追加進tempArr } } //如果文本框為空，且臨時數組為空，不創建div if (this.value.length == 0 || tempArr.length == 0) { //如果頁面有div，刪除div if (my$("dv")) { my$("box").removeChild(my$("dv")); } return; } //創建div 把div加入到名為box的div裡面 var dvObj = document.createElement("div"); my$("box").appendChild(dvObj); dvObj.id = "dv"; dvObj.style.width = "350px"; dvObj.style.border = "1px solid pink"; //迴圈遍歷臨時數組，創建對應的P標簽 for (var i = 0; i < tempArr.length; i++) { 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 = mouseoverHandle; //滑鼠離開 pObj.onmouseout = mouseoutHandle; } function mouseoverHandle() { this.style.backgroundColor = "yellow"; } function mouseoutHandle() { this.style.backgroundColor = ""; } }; </script> </body> </html>
