基于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 相关文章推荐
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
深入理解ES6中let和闭包
Feb 22 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python最长公共子串算法实例
2015/03/07 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Django日志模块logging的配置详解
2017/02/14 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python 删除非空文件夹的实例
2018/04/26 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python3并发写文件与Python对比
2019/11/20 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
What is EJB
2016/07/22 面试题
大学生应聘自荐信
2013/10/11 职场文书
上班看电影检讨书
2014/02/12 职场文书
创业大赛策划书
2014/03/01 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电