JavaScript实现百度搜索框的过程
- 更新时间：2020-07-24 13:59:40
- 编辑：聂文翰
参考资料
正文内容
基于JavaScript实现百度搜索框效果
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
相关教程
-
实例分析jQuery搜索子元素的方法
这篇文章主要介绍了jQuery搜索子元素的方法,实例分析了children、find等方法的使用技巧,需要的朋友可以参考下
发布时间：2020-03-14
-
用Zend Framework框架实现Google搜索分页实例代码
这篇文章主要介绍了Zend Framework框架实现类似Google搜索分页效果,结合实例形式分析了Zend Framework框架实现分页效果所涉及的基本查询、判断与分页效果构造相关操作技巧,需要的朋友可以参考下
发布时间：2019-12-30
-
实例解析Yii2框架整合Xunsearch搜索引擎的方法
这篇文章主要介绍了Yii2框架整合Xunsearch搜索引擎的方法,结合实例形式分析了Yii2框架整合Xunsearch的具体步骤与相关注意事项,需要的朋友可以参考下
发布时间：2020-02-10
-
关于mysql全文搜索 sql命令的写法
首先,大家先去下载一份dvbbs.php beta1的代码，解压后先抛开php代码，找出你的mysql手册，如果没有手册那么就直接看下面的实例操作吧！
发布时间：2020-02-03
-
小程序实现推荐搜索列表效果
这篇文章主要为大家详细介绍了小程序实现搜索界面，小程序实现推荐搜索列表效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2019-12-07
-
python实现搜索引擎Pylucene实例用法
什么是搜索引擎？搜索引擎是“对网络信息资源进行搜集整理并提供信息查询服务的系统，包括信息搜集、信息整理和用户查询三部分”。如图1是搜索引擎的一般结构，信息搜集模块从网络采
发布时间：2019-11-23
-
jQuery实现搜索关键字自动匹配功能的实例
这篇文章主要介绍了基于jQuery实现搜索关键字自动匹配功能，自动匹配搜索关键词功能广泛应用到搜索引擎当中，感兴趣的小伙伴们可以参考一下
发布时间：2020-03-08
-
PHP实现关键字搜索后标红的方法
这篇文章主要介绍了PHP实现关键字搜索后描红功能,结合实例形式分析了php数据库连接、查询、字符串转换等相关操作技巧,需要的朋友可以参考下
发布时间：2019-11-22
-
django组合搜索的实现过程
这篇文章主要介绍了django组合搜索实现过程详解(附代码),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
发布时间：2020-06-11
-
jQuery实现可输入搜索文字的下拉框实例代码
jQuery实现点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面
发布时间：2019-10-09
-
JavaScript启示录
《JavaScript启示录》无关于JavaScript设计模式，也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。
大小：24.4 MBJS电子书
-
你不知道的JavaScript（中卷）
JavaScript这门语言简单易用，很容易上手，但其语言机制复杂微妙，即使是经验丰富的JavaScript开发人员，如果没有认真学习的话也无法真正理解。
大小：7.8 MBJS电子书
-
JavaScript编程全解
JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题，无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也
大小：6.67 MBjs编程电子书
-
JavaScript基础教程
本书是经典的JavaScript入门书，以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式
大小：14 MBJS教程电子书
-
看透JavaScript：原理、方法与实践
本书由资深软件开发专家撰写，凝聚其多年开发经验，系统、深入、全面地阐释JavaScript，内容涉及流行的Web开发实践，结合实际案例进行讲解，授人以渔。本书内容并不局限于某个具体功能的
大小：251 MBJavaScript电子书
