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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 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网上调查系统
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python按钮的响应事件详解
2019/03/04 Python
python变量命名的7条建议
2019/07/04 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
django的ORM操作 增加和查询
2019/07/26 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
毕业生自我鉴定
2013/11/05 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
护士年终考核评语
2014/12/31 职场文书
匿名检举信范文
2015/03/02 职场文书
小学美术教学反思
2016/02/17 职场文书
python flask框架快速入门
2021/05/14 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Python+Tkinter制作专属图形化界面
2022/04/01 Python