基于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 相关文章推荐
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
javascript自定义加载loading效果
Sep 15 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
js获取class的所有元素
2013/03/28 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python input函数使用实例解析
2019/11/22 Python
python属于解释语言吗
2020/06/11 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
生产厂长岗位职责
2014/02/21 职场文书
大学新学期计划书
2014/04/28 职场文书
丧事答谢词
2015/01/05 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
python实现简单区块链结构
2021/04/25 Python
MYSQL常用函数介绍
2022/05/05 MySQL