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

2024-05-06 15:44:35

字体：大中小

来源：转载

供稿：网友

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

上一篇：javascript中的with语句学习笔记及用法

下一篇：node+multer实现图片上传的示例代码