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 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
如何使用CocosCreator对象池
Apr 14 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
php下MYSQL limit的优化
2008/01/10 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
扩展String功能方法
2006/09/22 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
使用python实现rsa算法代码
2016/02/17 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
数控技术学生的自我评价
2014/02/15 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
初三化学教学反思
2016/02/22 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Linux中文件的基本属性介绍
2022/06/01 Servers