模拟百度搜索框,输入时显示历史记录
今天写了个小demo,利用本地存储的特点,模拟百度搜索框。
主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示。
主要HTML代码为
<div class="search"><input type="text"/><button class="btn">搜索</button> </div> <ul class="hidden"><li></li> </ul>
CSS代码为:
1 .search{ 2 margin:30px 80px; 3 position: relative; 4 5 } 6 .search input{ 7 position: absolute; 8 top:0; 9 left:0; 10 width: 300px; 11 height:35px; 12 outline:none; 13 border:1px solid #979797; 14 text-indent: 10px; 15 } 16 .search .btn{ 17 position: absolute; 18 top:0; 19 left:301px; 20 width:80px; 21 height:37px; 22 border:1px solid #979797; 23 background:linear-gradient(to bottom ,#f9f9f9, #ededed); 24 font-size:16px; 25 outline: none; 26 27 } 28 ul{ 29 width: 381px; 30 border:1px solid #979797; 31 position: absolute; 32 top: 66px; 33 left:80px; 35 box-sizing: border-box; 36 } 37 ul li{ 38 line-height: 30px; 39 color:#7a77c8; 40 cursor: pointer; 41 padding:0 10px; 42 box-sizing: border-box; 43 } 44 ul li:hover{ 45 background:#7a77c8; 46 color:white; 47 } 48 .hidden{ 49 display: none; 50 } 51 .show{ 52 display: block; 53 }
JavaScript部分及注释为:
1 <!-- 获取本地数据--> 2 3 // var data=localStorage.getItem('search'); 4 // console.log(data); 5 6 // 获取表单元素 7 var text=document.getElementsByTagName('input')[0]; 8 9 //获取用来显示历史记录的列表框 10 var hidden=document.getElementsByTagName('ul')[0]; 11 12 // 获取搜索按钮 13 var btn=document.getElementsByClassName('btn')[0]; 14 15 16 17 // 从本地存储中获取本地数据 18 var data=localStorage.getItem('search'); 19 //将数据转换为数组格式 20 data=data?JSON.parse(data):[]; 21 22 23 // 当键盘按键释放时触发事件 24 25 text.οnkeyup= function () { 26 27 // 获取输入的数据 28 var txt=text.value; 29 30 // 初始化一个变量用来承载查找到的数据 31 var html=''; 32 33 for(var i=0;i<data.length;i++){ 34 var reg=new RegExp(txt); //只有用构造函数方式才能传递参数 35 36 var index= data[i].search(reg); //在本地数据中查找是否含有输入的内容 37 38 // 如果有,则将数据放到变量中 39 if(index!=-1){ 40 html+=' <li>'+data[i]+'</li>'; 41 42 } 43 } 44 45 // 将最后得到的所有数据添加到要展示的列表框中 46 hidden.innerHTML=html; 47 // 显示列表框 48 hidden.className=' show'; 49 50 51 }; 52 53 // 给搜索框添加单击事件,当事件发生时,将表单中需要搜索的内容添加到本地存储起来, 54 btn.οnclick= function () { 55 56 var txt=text.value; 57 58 // 先判断本地是否存在,不存在添加, 59 if(data.indexOf(txt)==-1){ 60 61 data.push(txt); 62 } 63 64 // 更新本地存储的数据 65 localStorage.setItem('search',JSON.stringify(data)); 66 67 // 搜索后 将表单内容置空,将选择框隐藏 68 text.value=''; 69 hidden.className='hidden'; 70 71 location.href='https://www.baidu.com/s?word='+txt; 72 73 }; 74 75 76 // 给历史展示框添加单击事件,利用事件委托 77 // 将点击的历史展示框中 的内容添加到搜索栏中, 78 hidden.οnclick= function (e) { 79 80 var li= e.target; 81 82 var title=li.innerHTML; 83 84 console.log(title); 85 86 text.value=title; 87 88 }
刚刚学习了本地存储,利用它的特点写个小demo。
方便与喜欢前端的小伙伴互相学习。如果有觉得不太好的地方,欢迎提出。
最后,生命不息,奋斗不止!
转载于:https://www.cnblogs.com/ranzhi/p/6498726.html
模拟百度搜索框,输入时显示历史记录相关推荐
- selenium定位 百度搜索框输入关键字后,下拉框联想出来的怎么定位
百度搜索框输入关键字后,下拉框联想出来的怎么定位? 百度下拉框联想出来的我们按F12中的箭头时,下拉框会消失收回去的. 这个时候怎么办呢 解决办法: 就三个步骤 1.在百度搜索框输入关键字" ...
- JS模拟百度搜索框和选项卡
练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en">< ...
- 案例:模拟百度搜索框自动加载内容
实现效果如下 我们重点分析js代码,所以html和css不做过多解释(想了解的直接看结尾的源代码) js需求分析: 需求一:搜索框txt键盘弹起:获取文本,根据搜索文本显示对象的ul内容列表; 需求二 ...
- 模拟百度搜索框自动联想功能,原生js+jsonp轻松搞定
链接 下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果 前端博客 传送门 LeetCode个人题解 传送门 讲解如何利用百度接口仿写一个搜索联想词功能 效果 ...
- 彻底删除百度搜索框历史记录
彻底清空百度搜索框历史记录 百度搜索.... 解决方案1: 一劳永逸 解决方案2: 方便灵活 解决方案3: 堪比无痕模式 百度搜索- 当你在Chrome浏览器用完百度引擎之后,压根无清空按钮-登录账号 ...
- 让Excel也像百度搜索框一样,录入时逐步提示
像百度搜索框一样,录入时逐步提示 百度搜索框中录入字符,会弹出提示框简化输入,并提升效率.Excel中也可以实现.
- 手机桌面百度搜索框不显示热词_高效搜索神器,你选listary还是火柴?
本文预计阅读5分钟. 你的电脑桌面是否杂乱不堪呢? 是不是打开特定的文件,每次都要一级一级的打开目录呢? 试想这样一个场景,你需要找一个文件,你只记得它的名字,但你不记得它在什么位置了,这时你该怎么办 ...
- Python自动化:模拟人类在百度搜索页输入关键词进行搜索并打开搜索结果
Python自动化:模拟人类在百度搜索页输入关键词进行搜索并打开搜索结果 Python程序代码实现一个简单的功能,在百度的搜索首页由Python程序代码模拟人类的动作,像人类一样输入搜索关键词'zha ...
- 基于jquery的搜索框输入提示
仿百度与google的搜索框输入提示,支持键盘上下选择与鼠标点击选择.只包含前面代码,后台返回数据为模拟的数据. 1.未输入前的效果 2.输入内容后,自动弹出下拉层,里面有若干匹配输入内容的输入建议项 ...
- Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能 当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息 文章目录 Ajax实现百度搜索框自动提示功能 一.实现效果 二.代码实现 1.前端页面 2.后端 ...
最新文章
- 我终于加上博士大佬的微信!攒了近百个技术问题,一口气解决!(文末有福利)...
- JSON快速转C#实体类
- 【Latext】上标下标 ( 右侧上标下标 | 任意字符的正上标记 | 任意字符的正下标记 | 常用数学符号的上标和下标 | 加和 | 乘积 | 交集 | 并集 | 上积 | 极限 | 上弧 )
- Google Gears 体验(2):本机 web 服务器
- 科大星云诗社动态20210827
- Rails 应用使用 Capistrano2 部署流程
- 京东一面:高并发下,如何保证分布式唯一全局 ID 生成?
- virtual studio 2017 配置vistual assist激活
- 放弃大厂高薪的程序员,涌进体制内
- 2016年最火的15款HTML5游戏引擎
- 应用程序无法正常启动0xc0150002怎么解决
- crontab 问号_轻松搞定crontab和quartz表达式
- 人脸识别技术全面总结:从传统方法到深度学习
- 龙卷风代码html,龙卷风旋涡.html
- Different tests were collected between gw0 and gw1. The difference is: --- gw0
- 鸿蒙 电视盒子,目前最强的电视盒子:性价比最高的5款电视盒子
- 获取token(/oauth/token)
- 【Vue】Vue移动端页面自适应解决方案
- php使用redis缓存
- 中文数藏与CIC国信公链等有关机构顺利召开国内数字藏品规划标准研讨会
热门文章
- XStream 解析 XML 深入剖析
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_5 SpringMVC拦截器之编写controller
- Python爬虫面试题170道:2019版【1】
- Swift新手教程3-字符串String
- oracle桌面工具plsql连接本地远程数据库
- 无法嵌入互操作类型“Microsoft.Office.Interop.Excel.ApplicationClass”。请改用适用的接口 ....
- 队列服务(Queue)
- 职涯成长的认知与突破
- 涂鸦板制作教程——其中的重做和撤消我觉得不错
- Jquery实现全选反选和省城市联动效果