快捷導航

JS實現(xiàn)百度搜索框關(guān)鍵字推薦

更新時間：2020年02月17日 16:51:21 作者：箏非

這篇文章主要為大家詳細介紹了JS實現(xiàn)百度搜索框關(guān)鍵字推薦，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)百度搜索框關(guān)鍵字推薦的具體代碼，供大家參考，具體內(nèi)容如下

<!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 = ["我是真滴帥啊", "我是真滴牛批啊啊啊", "中國共產(chǎn)黨萬歲啊啊啊", "我咋能這么優(yōu)秀嘞？？",
    "中國國民黨就不行嘿嘿嘿", "蘋果好吃嗎", "我滴個龜龜耶", "蘋果手機很好用！"];
  my$("txt").onkeyup = function () {
    //每次鍵盤抬起都判斷有沒有新創(chuàng)建的div，有則刪除所有
    if (my$("dv")) {
      my$("box").removeChild(my$("dv"));
    }
    //獲取文本框內(nèi)容
    var text = this.value;
    //添加一個用來存對應(yīng)數(shù)據(jù)的空數(shù)組
    var tempArr = [];
    //比對文本是否一致
    for (var i = 0; i < keyWords.length; i++) {
      //
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);
      }
    }
    //如果文本框為空或者數(shù)組五元素，則刪除所有div
    if (this.value.length == 0 || tempArr.length == 0) {
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }//end if
      return;
    }// end if
 
    //遍歷臨時數(shù)組，創(chuàng)建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";
 
    //循環(huán)遍歷臨時數(shù)組，在創(chuàng)建的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文件：

/*
* 根據(jù)id屬性的值，返回對應(yīng)的標簽元素
* */
function my$(id) {
  return document.getElementById(id);
};
 
// 設(shè)置任意標簽中的文本內(nèi)容
function setInnerText(element, text) {
  // 判斷瀏覽器是否支持這個屬性
  if (typeof element.textContent == "undefined") {//不支持
    element.innerText = text;
  } else {//支持
    element.textContent = text;
  }
};
 
// 獲取任意標簽中的文本內(nèi)容
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;
  }
}
 
//為任意元素綁定任意的事件。（元素，事件類型，處理函數(shù)）
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;
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: