JS實現百度搜索框關鍵字推薦
阿新 • • 發佈:2020-02-19
本文例項為大家分享了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,fnName) { if (element.removeEventListener) { element.removeEventListener(type,fnName,false); } else if (element.detachEvent) { element.detachEvent("on" + type,fnName); } else { element["on" + type] = null; } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。