js模拟实现百度搜索


Posted in Javascript onJune 28, 2020

本文实例为大家分享了js实现百度搜索的具体代码,供大家参考,具体内容如下

总体思路:用户在文本框里输入的是什么,就来数组中遍历每个元素,找输入的内容是否在遍历到的元素里面,如果在,就把这个元素做成li标签加到ul里,如果不在就不操作

怎么判断在不在字符串里?

xxx.indexOf(内容) != -1

onkeyup事件:

键盘弹起时会触发的事件

效果图:

js模拟实现百度搜索

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 body {
 font-size: 20px;
 }
 
 .box {
 width: 600px;
 height: 40px;
 margin: 200px auto;
 position: relative;
 }
 
 #txt {
 width: 498px;
 height: 38px;
 border: 1px solid #eee;
 font-size: 20px;
 }
 
 #search {
 width: 100px;
 height: 40px;
 }
 
 #keywords {
 position: absolute;
 top: 40px;
 left: 0;
 background-color: rgb(12, 255, 24);
 list-style: none;
 width: 500px;;
 }
 
 li {
 line-height: 24px;
 }
 
 /*/!*是li标签,并且鼠标移入的时候变红*!/*/
 /*li:hover {*/
 
 /*background-color: red;*/
 /*}*/
 </style>
</head>
<body>
 
 
<div class="box">
 <div class="top">
 <input type="text" id="txt"/><input type="button" value="search" id="search"/>
 </div>
 <ul id="keywords"></ul>
</div>
 
 
<script>
 
 //查找用户输入的关键字,就来这个数组找
 var keywords = ["zhongqiulan", "linda为什么很黑", "who are linda", "广东人", "广东人爱吃", "广东人爱吃福建人", "林丹的生平", "JavaScript", "Java", "王思聪", "王健林", "社会王", "隔壁老王", "班长以前为什么头发长", "aaaa", "hhhh", "cccc"];
 
 
 //找到显示结果的ul
 var ul = document.getElementById("keywords");
 
 //找到文本框
 var txt = document.getElementById("txt");
 
 //给文本框加键盘弹起事件(当用户在文本框里按键盘上的任意键并弹起时触发)
 txt.onkeyup = function () {
 
 
 //事件刚刚触发就先清空上一次的结果(其实就是把ul清空)
 ul.innerHTML = "";
 
 //拿到用户输入的内容 this是文本框
 var str = this.value;
 
 //如果拿到空字符串,就不要执行下面的代码
 if (str == "") {
 
 return;
 }
 
 //遍历数组,拿到所有结果
 for (var i = 0; i < keywords.length; i++) {
 
 //判断当前某一个结果里是否包含用户输入的内容
 if (keywords[i].indexOf(str) != -1) {
 
 //把当前结果做成li标签
 var li = document.createElement("li");
 li.innerHTML = keywords[i];
 
 //添加到ul里显示
 ul.appendChild(li);
 
 //每创建一个li标签就加一个鼠标移入事件
 li.onmouseover = function () {
  this.style.backgroundColor = "red";
 }
 
 //鼠标移出时把被移出的li颜色清空
 li.onmouseout = function () {
  this.style.backgroundColor = "";
 }
 
 //给每个li加点击事件
 li.onclick = function () {
 
  //要拿到被点击的li标签的内容
  //再把内容赋值给文本框
  txt.value = this.innerHTML;
  ul.innerHTML = "";
 }
 }
 }
 };
 
 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
js中unicode转码方法详解
Oct 09 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
预备党员表决心书
2014/03/11 职场文书
实习生岗位职责
2014/04/12 职场文书
2014年三万活动总结
2014/04/26 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2015年路政工作总结
2015/05/22 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python