JS实现百度搜索框关键字推荐

本文实例为大家分享了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;
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。