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


Posted in Javascript onFebruary 17, 2020

本文实例为大家分享了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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
javascript复制对象使用说明
Jun 28 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
js实现百度淘宝搜索功能
Feb 17 #Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
vue框架中props的typescript用法详解
Feb 17 #Javascript
JS通用方法触发点击事件代码实例
Feb 17 #Javascript
JS前端广告拦截实现原理解析
Feb 17 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php实现的ping端口函数实例
2014/11/12 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
用python制作个音乐下载器
2021/01/30 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
加工操作管理制度
2014/01/19 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
教师先进事迹材料
2014/12/16 职场文书
先进个人材料怎么写
2014/12/30 职场文书
党支部鉴定意见
2015/06/02 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers