高仿百度搜索引擎
阿新 • • 發佈：2017-09-13
ucc return 回調函數 else 上下 about inpu click eat
這是百度搜索
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/baiduFirst.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="img/bd_logo1.png" ></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="img/zbios_efde696.png" ><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>
</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("../img/icons_5859e57.png") no-repeat -600px -96px;
}
#notice i:nth-child(7){
background: url("../img/icons_5859e57.png") no-repeat -623px -96px;
}JS
<script>
$(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);
});
</script>高仿百度搜索引擎