本文實例為大家分享了JS實現百度搜索框關鍵字推薦的具體代碼，供大家參考，具體內容如下
<!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) { if (my$("dv")) { my$("box").removeChild(my$("dv")); }//end if return; }// end if //遍歷臨時數組，創建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 red"; //循環遍歷臨時數組，在創建的div中添加p標簽 for (var i = 0; i < tempArr.length; i++) { var pObj = document.createElement("p"); dvObj.appendChild(pObj); setInnerText(pObj, tempArr[i]); pObj.style.fontSize = "14px"; 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 = "pink"; }; pObj.onmouseout = function () { this.style.backgroundColor = ""; }; } }</script></body></html>外部引入工具JS文件：
/** 根據id屬性的值，返回對應的標簽元素* */function my$(id) { return document.getElementById(id);}; // 設置任意標簽中的文本內容function setInnerText(element, text) { // 判斷瀏覽器是否支持這個屬性 if (typeof element.textContent == "undefined") {//不支持 element.innerText = text; } else {//支持 element.textContent = text; }}; // 獲取任意標簽中的文本內容function getInnerText(element) { if (typeof element.textContent == "undefined") { return element.innerText; } else { return element.textContent; }}; //獲取任意一個父級元素的第一個子級元素function getFirstElementChild(element) { if (element.firstElementChild) {//IE8支持 return element.firstElementChild; } else {//IE8不支持 var node = element.firstChild; while (node && node.nodeType != 1) {//不是標簽 node = node.nextSibling; } return node; }} //獲取任意一個父級元素的最后一個子級元素function getLastElementChild(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node.previousSibling; } return node; }} //為任意元素綁定任意的事件。（元素，事件類型，處理函數）function addEventListener(element, type, fn) { //判斷瀏覽器是否支持這個方法 if (element.addEventListener) { element.addEventListener(type, fn, false) } else if (element.attachEvent) { element.attachEvent("on" + type, fn) } else { element["on" + type] = fn; }} //為任意元素解綁事件function removeEventListener(element, type, fnName) { if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detachEvent) { element.detachEvent("on" + type, fnName); } else { element["on" + type] = null; }}
新聞熱點
疑難解答
圖片精選
