最近在百度搜索的時候，當你輸入一個字或者詞的時候，他會給你們彈出一個下拉框出來，裡面是和你相關的搜索提示 比如 我輸入楊字，他會給我提示以下搜索提示 我嘗試著用JavaScript做了一個類似的練習，以下是我用VS2013寫的代碼，有不對的地方，請不吝賜教。 效果展示： 關於這個練習我有以下幾點思索 ...
最近在百度搜索的時候，當你輸入一個字或者詞的時候，他會給你們彈出一個下拉框出來，裡面是和你相關的搜索提示
比如 我輸入楊字，他會給我提示以下搜索提示
我嘗試著用JavaScript做了一個類似的練習，以下是我用VS2013寫的代碼，有不對的地方，請不吝賜教。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script type="text/javascript"> 7 8 onload = function () { 9 10 function handle() { 11 var keyWords = { 12 "楊忠科": ["楊忠科的視頻", "楊忠科的微博", "楊忠科的郵箱"], 13 "楊": ["楊利偉", "楊振宇", "楊過"], 14 "楊忠": ["楊忠科", "楊忠學", "楊忠愛國"], 15 "楊忠科愛":["楊忠科愛祖國","楊忠科愛首都","楊忠科愛學習"] 16 }; 17 if (keyWords[this.value]) { 18 //判斷body中是否有這個層,如果有就刪掉了 19 if (document.getElementById('dv')) { 20 document.body.removeChild(document.getElementById('dv')); 21 } 22 //開始創建層 23 var dvObj = document.createElement('div'); 24 dvObj.id = 'dv'; 25 dvObj.style.width = '300px'; 26 //dvObj.style.height = '200px'; //將來可以不要 27 dvObj.style.border = '1px solid red'; 28 document.body.appendChild(dvObj); 29 //脫離文檔流 30 dvObj.style.position = 'absolute'; 31 dvObj.style.left = this.offsetLeft + 'px'; 32 dvObj.style.top = this.offsetHeight + this.offsetTop + 'px'; 33 //迴圈創建 34 for (var i = 0; i < keyWords[this.value].length; i++) { 35 //創建一個可以存文本的標簽 36 var pObj = document.createElement('p'); 37 pObj.innerText = keyWords[this.value][i]; 38 39 //p標簽要有小手，還有高亮顯示 40 pObj.style.cursor = 'pointer'; 41 pObj.style.margin = '5px'; 42 pObj.onmouseover = function () { 43 this.style.backgroundColor = 'red'; 44 }; 45 pObj.onmouseout = function () { 46 this.style.backgroundColor = ''; 47 } 48 dvObj.appendChild(pObj); //把p標簽加到層中 49 } 50 //創建可以顯示文件的標簽 51 52 53 54 55 } 56 } 57 //firefox下檢測狀態改變只能用oninput,且需要用addEventListener來註冊事件。 58 if (/msie/i.test(navigator.userAgent)) //ie瀏覽器 59 { 60 document.getElementById('txt').onpropertychange = handle 61 } 62 else {//非ie瀏覽器，比如Firefox 63 document.getElementById('txt').addEventListener("input", handle, false); 64 } 65 }; 66 </script> 67 </head> 68 <body> 69 <span id="msg"></span> 70 請輸入搜索關鍵字<input type="text" name="name" value="" style="width:300px;height:30px;font-size:25px; border:1px solid green" id="txt"/>百度一下 71 </body> 72 </html>
效果展示：
關於這個練習我有以下幾點思索
1.因為搜索熱詞提前被設定好，放在鍵值對裡面，所以搜索的範圍也就被限定了，這個可以再被加深，和資料庫中的數據連接起來，搜索的的關鍵詞直接從資料庫中查詢，這個具體怎麼寫我還沒研究透，希望有經驗的前輩可以指教。
2.關於這個代碼的應用我覺得可以應用在用戶查詢搜索上，百度搜索就是一個很好的實例
3.代碼畢竟是JS寫的，如果用戶的電腦將JS控制項阻止了，效果也就不行了。
