高仿百度搜索引擎
这是百度搜索
HTML部分，我在这里使用外链的方式引入了css与js的代码，大家参考时注意一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link rel="stylesheet" href="css/baidu.css">
</head>
<body>
<nav id="nav">
<div>更多产品</div>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">设置</a></li>
</ul>
</nav>
<div id="baiduImg"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""></div>
<div id="search">
<div>
<input type="text" id="input">
<div id="content">
<ul></ul>
</div>
</div>
<span><input type="button" value="百度一下" id="btn"></span>
</div>
<div id="ewm">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt=""><br>
<span>手机百度</span>
</div>
<div id="aboutBaidu">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</a>
</div>
<div id="notice">
<span>©2017 Baidu </span>
<a href="">使用百度前必读</a>
<a href="">意见反馈</a>
<span>京ICP证030173号</span>
<i></i>
<a href="">京公网安备11000002000001号</a>
<i></i>
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/baidu.js"></script>
</body>
</html>
CSS代码
*{
padding:0;
margin:0;
}
body{
text-align: center;
/*overflow: hidden;*/
height: 600px;
}
#nav{
padding: 15px;
overflow: hidden;
}
#nav div,#nav ul{
float: right;
}
#nav ul{
list-style: none;
}
#nav ul li{
display: inline-block;
margin-right: 15px;
font-size: 14px;
}
#nav ul li a{
color: #0f0f0f;
font-weight:bold;
}
#nav ul li a:hover{
color: rgb(51,136,255);
}
#nav div{
width: 60px;
height: 26px;
line-height: 26px;
color: #ffffff;
font-size: 12px;
background: rgb(51,136,255);
}
#baiduImg img{
width: 270px;
margin: 0 0 22px 0;
}
#search {
width: 670px;
overflow: hidden;
margin: 0 auto;
}
#search div:first-child input{
width: 540px;
height: 30px;
outline:none;
padding: 0 10px;
}
#search div:first-child{
position: relative;
float: left;
height: 124px;
}
#search div:first-child div{
position: absolute;
width: 560px;
top: 38px;
left: 0;
border: 1px solid #ccc;
border-top: 0;
display: none;
}
#search div:first-child ul{
list-style: none;
text-align: left;
padding-left: 10px;
}
#search span:last-child input{
float: left;
width: 100px;
height: 34px;
color: #ffffff;
cursor: pointer;
background: rgb(51,136,255);
border: none;
margin-left: -1px;
}
#search span:last-child input:hover{
background: #317ef3;
box-shadow: 1px 1px 1px #ccc;
}
#ewm{
margin: 100px 0 25px 0;
}
#ewm span{
font-size: 14px;
color: #0f0f0f;
font-weight: bold;
}
#aboutBaidu,#notice{
color: rgb(153,153,153);
font-size: 12px;
}
#aboutBaidu{
padding-bottom: 6px;
}
#notice{
margin-bottom: 30px;
}
#aboutBaidu a,#notice a{
color: rgb(153,153,153);
}
#aboutBaidu a{
margin: 0 10px 0 10px;
}
#notice a:nth-child(6){
margin-left: 16px;
}
#notice i{
width: 14px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
#notice i:nth-child(5){
background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png") no-repeat -600px -96px;
}
#notice i:nth-child(7){
background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png") no-repeat -623px -96px;
}
JS代码，这里要注意下，因为下面代码用到了jqery,所以HTML的代码里也要引入jqery，下面代码里面稍微复杂一点点的逻辑我都有写注释，如果注释看不明白欢迎向我提问，有哪里写的不足或者错误，也欢迎大家给我提建议。
/**
* Created by Frank on 2017/12/26.
*/
$(function () {
function abc(data) {
// console.log('=======abc==',data);
}
var currentVal = '';//当前文本框的值
//输入框聚焦时边框颜色改变
$("#input").focus(function () {
$(this).css({"border": "1px solid #317ef3","height": "32px"});
});
//输入框失焦时边框颜色改变为原来颜色，下拉框隐藏
$("#input").blur(function () {
$(this).css({"border": "1px solid #ccc"});
// $("#content").hide();
});
//输入框输入时，请求数据,并把结果放在输入框下面
$("#input").keyup(function (e) {
if(e.keyCode == 40 || e.keyCode == 38){
//按下上下键的时候不需要查询数据
return;
}
var val = $(this).val();
currentVal = val;
$.ajax({
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + val,
type: 'get',
dataType: 'jsonp',
jsonp: 'cb',// 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
success: function (data) {
var tmp = '';
for (var i = 0; i < Math.min(data.s.length, 4); i++) {
tmp += '<li>' + data.s[i] + '</li>';
}
$("#content ul").html(tmp);
if (tmp) {
$("#content").show()
} else {
$("#content").hide()
}
}
})
});
//监听输入框输入数据后键盘的上键与下键的keydown事件
var index = -1;
//下拉框里面li的hover事件,用到了时间委托
$("#input").keydown(function (e) {
if(e.keyCode == 40 || e.keyCode == 38){
var liArray = $('#content ul li');
if(e.keyCode == 40){//down键
index ++;
}
if(e.keyCode == 38){//up键
index --;
}
liArray.css({'background':'#fff'});
if(index == liArray.length){
//设置初始值
index = -1;
}
if(index < -1){
index = liArray.length - 1;
}
if(index >= 0 && index <= liArray.length -1){
liArray.eq(index).css({'background':'#ccc'});
$('#input').val(liArray.eq(index).text());
}else {
//不在0 - li长度范围内
$('#input').val(currentVal);
}
}
if(e.keyCode == 13){
search();
}
});
function search() {
var val = $('#input').val();
if(val){
//打开新窗口
window.open('https://www.baidu.com/s?wd='+val, '_bank');
}
}
$("#content ul").on('mouseover', 'li', function () {
$(this).css({background: '#EBEBEB'})
}).on('mouseout', 'li', function () {
$(this).css({background: '#fff'})
});
//下拉框里面li的点击事件，事件委托
$("#content ul").on('click', "li", function () {
$("#input").val($(this).text());
search();
});
$("#btn").click(search);
});
