基于JavaScript实现百度搜索框效果


Posted in Javascript onJune 28, 2020

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
  margin:0;
  padding:0;
  font-size:14px;
 }
 input{
  display:block;
  outline:none;
 }
 a{
  display:block;
  text-decoration: none;
  color:#000;
 }
 a:hover,a:active,a:target{
  text-decoration: none;
  color:#000;
 }
 ul,li{

  list-style:none;
 }
 .box{
  position:absolute;
  top:20px;
  left:50%;
  margin-left:-250px;
  width:500px;
 }
 .box input{
  width:300px;
  height:35px;
  padding:0 10px;
  border:1px solid #008000;
 }
 .box ul{
  display:none;
  position:relative;
  top:-1px;
  border:1px solid #008000;
 }
 .box ul li,.box ul li a{
  height:35px;
  line-height:35px;
  
 }
 .box ul li a{
  padding:0 10px;
 }
 .box ul li a:hover{
  background:#ccc;
 }
 </style>
</head>
<body>
 <div class='box'>
 <input type="text" id='searchInp'>
 <ul id='searchList'>
  <li><a href="javascript:;">111111111111</a></li>
  <li><a href="javascript:;">2222222222</a></li>
  <li><a href="javascript:;">33333333333</a></li>
  <li><a href="javascript:;">444444444444</a></li>
  <li><a href="javascript:;">5555555555555</a></li>
 </ul>
 </div>


 <script>
 //显示
 /*
  1、文本框获取焦点,并且文本框中有内容的时候
  2、在文本框中操作内容(新输入/删除),如果内容没有清空,我们就显示,否则就隐藏

 */
 //隐藏
 /*
  1、点击页面中其余的位置(除了点击文本框和searchList里面的每一行)都隐藏;
  2、点击searchList中的列表隐藏,但是还要把列表中的内容放到文本框中
 */
 //不管是获取焦点onfocus,还是在里面编辑内容onkeyup,都是有内容显示,没内容隐藏
 var searchInp = document.getElementById('searchInp'),searchList = document.getElementById('searchList');
 searchInp.onkeyup = searchInp.onfocus = function(){
  var val = this.value.replace(/(^ +| +$)/g,'')//获取文本框中的内容,并且去除它的首尾空格
  searchList.style.display = val.length > 0 ? "block" : "none";
 }

 document.body.onclick = function(e){
  e = e || window.event;
  e.target = e.target || e.srcElement;

  //如果事件源是#searchList下的a标签,我们让searchList隐藏,并且把当前点击这个a中的内容放在文本框中
  if(e.target.tagName.toLowerCase()==="a" && e.target.parentNode.parentNode.id==="searchList"){
  searchList.style.display = "none";
  searchInp.value = e.target.innerHTML;
  return;
  }
  //如果事件源是文本框还需要单独的处理
  // if(e.target.id === "searchInp"){
  // return;
  // }
  searchList.style.display = "none";
 }

 //我们可以阻止一个容器中某些特殊性的元素,让其不在委托的范围内:我们只需要把这些不需要委托的阻止冒泡传播即可
 searchInp.onclick = function(e){
  e = e || window.event;
  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = "true";
 }
 </script>
</body>
</html>

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

Javascript 相关文章推荐
JQuery性能优化的几点建议
May 14 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 #Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 #Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 #Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
You might like
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
php-app开发接口加密详解
2018/04/18 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
js实现翻牌小游戏
2020/07/31 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
生物制药自我鉴定
2014/01/25 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
如何写辞职信
2015/05/13 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
《窃读记》教学反思
2016/02/18 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书