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 相关文章推荐
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
详解Vue单元测试case写法
May 24 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
Vue.js的动态组件模板的实现
Nov 26 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
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
js随机颜色代码的多种实现方式
2013/04/23 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
快速了解Python中的装饰器
2018/01/11 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python datetime模块使用方法小结
2020/06/18 Python
python中upper是做什么用的
2020/07/20 Python
详解python UDP 编程
2020/08/24 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
中秋节活动总结
2014/08/29 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
教师读书活动心得体会
2016/01/14 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python