基于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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
js实现DIV的一些简单控制
Jun 04 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
浅析创建javascript对象的方法
May 13 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
php实现session共享的实例方法
2019/09/19 PHP
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
vue中 this.$set的用法详解
2019/09/06 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python批量查询域名是否被注册过
2017/06/21 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
社会保险接收函
2014/01/12 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
房展策划方案
2014/06/07 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书