溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS如何實現百度搜索框關鍵字推薦

發布時間:2021-04-19 09:55:36 來源:億速云 閱讀:310 作者:小新 欄目:web開發

這篇文章主要介紹了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;
  }
}

感謝你能夠認真閱讀完這篇文章,希望小編分享的“JS如何實現百度搜索框關鍵字推薦”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女