本文介紹一下仿百度搜索框，當對輸入框鍵入文字時，自動彈出建議選項並匹配。
效果如下：
OK，首先，建個輸入框哈
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>自動搜索</title> 6 </head> 7 <body> 8 自動搜索框 <input type="text" id="input" onkeyup="find()"> 9 <div style="position:absolute;" id="popup"> 10 <table id="table" border="0" cellspacing="0" cellpadding="0"> 11 <tbody id="table_body"></tbody> 12 </table> 13 </div> 14 </body> 15 </html>
當輸入框有輸入動作時即調用find函數。find函數主要是搜索對應的相關建議項，此處用的最簡單的方法：包含輸入內容的數據項即為符合的建議項。
具體實現如下：
1 function find() { 2 3 inputField = document.getElementById("input"); 4 5 for (var i = 0; i < data.length; i++) { 6 if ((data[i]).indexOf(inputField.value)>=0){ 7 arr.push(data[i]); 8 } 9 } 10 11 set(arr); 12 }
現在來到set 函數，其主要功能是將符合的建議項逐條放置於彈出框中。具體實現如下：
1 function set(arr) { 2 3 var size = arr.length; 4 setOffsets(); 5 6 var row, cell, txtNode; 7 for (var i = 0; i < size; i++) { 8 var nextNode = arr[i]; 9 row = document.createElement("tr"); 10 cell = document.createElement("td"); 11 12 cell.onmouseout = function() {this.className='mouseOver';}; 13 cell.onmouseover = function() {this.className='mouseOut';};//鼠標懸停或離開選項時顏色變化 14 cell.setAttribute("bgcolor", "#FFFAFA"); 15 cell.setAttribute("border", "0"); 16 cell.onclick = function() { populate(this); } ; //鼠標點擊選項給輸入框賦值 17 18 txtNode = document.createTextNode(nextNode); 19 cell.appendChild(txtNode); 20 row.appendChild(cell); 21 TableBody.appendChild(row); 22 } 23 }
此處又引用了兩個函數。setOffsets主要是設置彈出框的位置。populate 是當鼠標點擊選項時將值賦給輸入框。
setOffsets 實現如下：
1 function setOffsets() { 2 var end = inputField.offsetWidth; 3 var left = calculateOffsetLeft(inputField); 4 var top = calculateOffsetTop(inputField) + inputField.offsetHeight; 5 6 completeDiv.style.border = "black 1px solid"; 7 completeDiv.style.left = left + "px"; 8 completeDiv.style.top = top + "px"; 9 Table.style.width = end + "px"; 10 } 11 12 function calculateOffsetLeft(field) { 13 return calculateOffset(field, "offsetLeft"); 14 } 15 16 function calculateOffsetTop(field) { 17 return calculateOffset(field, "offsetTop"); 18 } 19 20 function calculateOffset(field, attr) { 21 var offset = 0; 22 while(field) { 23 offset += field[attr]; 24 field = field.offsetParent; 25 } 26 return offset; 27 }
populate 實現如下：
1 function populate(cell) {//點擊為文本框賦值 2 inputField.value = cell.firstChild.nodeValue; 3 clearNames(); 4 }
為文本框賦值后需消除彈出框中的建議，於是調用clear 函數。具體實現如下：
1 function clear() { 2 if(TableBody){ 3 var ind = TableBody.childNodes.length; 4 for (var i = ind - 1; i >= 0 ; i--) { 5 TableBody.removeChild(TableBody.childNodes[i]); 6 } 7 completeDiv.style.border = "none"; 8 } 9 }
Ok，到這里JS功能實現就完成了。下面設定一下鼠標滑過建議項時的顏色變化：
1 .mouseOut { 2 background: #708090; 3 color: #FFFAFA; 4 } 5 6 .mouseOver { 7 background: #FFFAFA; 8 color: #000000; 9 }
另：如需中文搜索，在find 函數中加入正則表達式判斷即可。
本文完。
歡迎大家交流指正！