基于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 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
js表头排序实现方法
Jan 16 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
nginx优化的六点方法
2021/03/31 Servers
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
5行Python代码实现一键批量扣图
2021/06/29 Python