先贴API：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bing Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Access-Control-Allow-Origin" content="*">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 50px;
height: auto;
}
body {
background-color: #333;
}
.bg-div {
width: 100%;
height: 630px;
background-size: 100%;
background-image: url('images/SwissSuspension_ZH-CN9196527618_1920x1080.jpg');
background-repeat: no-repeat;
position: relative;
}
.log {
background-image: url('images/bing.png');
background-position: 0 -20px;
margin: -8px 18px 0 0;
background-size: 100%;
width: 132px;
height: 52px;
background-repeat: no-repeat;
float: left;
}
form {
float: left;
background-color: #fff;
border: 1px solid rgb(189, 189, 189);
}
.searchInputText {
font-size: 12pt;
padding: 5px 5px 5px 10px;
border: 0;
float: left;
width: 350px;
height: 35px;
line-height: 35px;
outline: none;
}
.searchInputButton {
float: left;
outline: none;
cursor: pointer;
border: 0;
background-image: url('images/hpc25.png');
background-position: -160px -56px;
width: 45px;
height: 45px;
}
.searchBox {
position: absolute;
left: 250px;
top: 200px;
}
.suggest {
display: none;
background-color: #fff;
border: 1px solid rgb(189, 189, 189);
width: 410px;
height: 188px;
overflow: hidden;
/* position: absolute;
left: 400px;
top: 245px; */
}
.suggest ul {
list-style: none;
}
.suggest ul li {
padding: 3px 3px 3px 10px;
font-size: 12pt;
height: 25px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
background-color: #e5e5e5;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="searchBox">
<div class="log"></div>
<form id="searchForm" action="https://cn.bing.com/search" target="_blank" id="searchForm">
<input type="text" class="searchInputText" name="q" id="searchInput" autocomplete="off">
<input type="submit" class="searchInputButton" value="">
</form>
</div>
</div>
<div class="suggest" id="searchSuggest">
<ul>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('#123').attr('href',"http://www.w3school.com.cn/jquery");
$('#searchInput').on('keyup click', function () {
var searchText = $('#searchInput').val();
//jQuery.ajax方法获取百度关键字搜索api结果，并展示搜索建议
$.ajax({
type: 'get',
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + searchText,
async: true,
dataType: 'jsonp',
jsonp: 'cb',
success: function (d) {
if (d.s.length) {
$('li').remove();
$(d.s).each(function (index, value) {
var Li = $('<li>').appendTo($('ul'));
$('<a>').html(value).attr({'href':'http://cn.bing.com/search?q='+value,'target':'_blank','style':'text-decoration:none;color:#333;display:block;width:410px'}).appendTo(Li);
//显示搜索建议，并定位
$('#searchSuggest').css({
'display': 'block',
'position': 'absolute',
'left': $('#searchInput').offset().left - 1 + 'px',
'top': $('#searchInput').offset().top + $('#searchInput').outerHeight(true) + 'px',
});
});
} else {
$('#searchSuggest').css({'display':'none'});
console.log(112);
}
}
});
});
$(document).on('click',function(){
$('#searchSuggest').css({'display': 'none'});
});
</script>
</body>
</html>
