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

(编辑：jimmy 日期: 2024/12/25 浏览：3 次 )

本文实例为大家分享了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="/UploadFiles/2021-04-02/common.js">

外部引入工具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语句学习笔记及用法
下一篇：js实现百度淘宝搜索功能