<!DOCTYPE?html><html>
????<head>
????<meta?charset="UTF-8">
????<title></title>
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1">
????<style?type="text/css">
????????body{
????????????background-color:?#333;
????????????}
???????.bg-div{
???????????position:?relative;
???????????background-image:?url(river.jpg);
???????????width:?1228px;
???????????height:?690px;
???????????margin:?0px?auto;
???????????}
???????.logo{
???????????background-image:?url(logo.png);
???????????width:?107px;
???????????height:?53px;
???????????float:?left;
???????????margin:?-8px?18px?0?0;/*margin為負(fù)值反向移動(dòng)*/
???????????}
???????.search-form{
???????????float:?left;
???????????background-color:?#fff;
???????????padding:4px;
???????????}
???????????/*border:0;去掉按鈕默認(rèn)邊框*/
???????.search-btn{
???????????border:?0;
???????????background-image:url(search-button.png)?;
???????????width:?29px;
???????????height:?29px;
???????????cursor:pointer;
???????????}
???????.search-text{
???????????border:?0;
???????????width:?300px;
???????????height:?25px;
???????????line-height:?25px;
???????????outline:?none;/*?outline(輪廓)是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。*/
???????????}
???????????.search-box{
???????????position:absolute;
???????????top:?200px;
???????????left:?300px;
???????????}
???????.suggest{
???????????width:?343px;
???????????background-color:?#fff;
???????????border:?1px?solid?#999999;
???????????}
???????.suggest?ul{
???????????list-style:?none;
???????????margin:?0;
???????????padding:?0;
???????????}
???????.suggest?ul?li{
???????????padding:?3px;
???????????font-size:?14px;
???????????line-height:?25px;
???????????cursor:?pointer;
???????????}
???????.suggest?ul?li:hover{
???????????text-decoration:?underline;
???????????background-color:?#e5e5e5;
???????????}
???</style>
???<script?src="jquery/jquery-3.3.1.js"></script>
???</head>
???<body>
???<div?class="bg-div">
???????<div?class="search-box">
???????????<div?class="logo"></div>
???????????<form?class="search-form"?action="https://cn.bing.com/search"?target="_blank"?id="search-form"?method="get">
???????????????<input?type="text"?class="search-text"?id="search_input"?autocomplete="off"/>
???????????????<!--這里設(shè)置value=""是為了去掉submit默認(rèn)生成的value文字-->
???????????????<input?type="submit"?class="search-btn"?value=""/>
???????????</form>
???????</div>
???????<div?class="suggest"?id="search-suggest"?style="display:?none;">
???????????<ul?id="search-result">
???????????????<li>C羅</li>
???????????????<li>梅西</li>
???????????</ul>
???????</div>
???</div>
???<script>
???????$("#search_input").on('keyup',function(event){
?????????var?searchText?=?$("#search_input").val();
?????????$.ajax({
???????????type:'get',
???????????url:'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText,
???????????async:true,
???????????dataType:"jsonp",
???????????jsonp:'cb',????????
???????????success:function(data){????????
?????????????var?data?=?data.AS.Results[0].Suggests;
?????????????var?html="";
?????????????for(var?i=0;i<data.length;i++){
?????????????html+='<li>'+data[i].Txt+'<li>';
?????????????}
?????????????$("#search-result").html(html);
????????????$("#search-suggest").show().css({
????????????????top:$(".search-box").position().top+$("#search-form").height()+8,
????????????????left:$(".search-box").position().left+124,
????????????????position:'absolute'????????
?????????????});???????
????????????},????????
????????????error:function(){????????
???????????????console.log("失敗")????????
????????????}
???????????});
????????//阻止事件冒泡到document，否則列表框會(huì)受到document的click事件而被hide()
????????event.stopPropagation();
??????});
?????$(document).on('click',function(){
???????$("#search-suggest").hide();
?????});
???</script>
???</body>
</html>
2018-08-28
親測(cè)可以用
2019-05-30
以上是本人測(cè)試的百度的搜索API接口 親測(cè)有效 小伙伴們從另一個(gè)角度也嘗試一下^_^
2019-05-30
<script>
$("#search_input").on("keyup", function() {
var searchText = $("#search_input").val();
var sugurl =
"http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug";
var content = searchText;
sugurl = sugurl.replace("#content#", content);
window.baidu = {
sug: function(json) {
console.log(json)
var html = ''
for (var i = 0; i < json.s.length; i++) {
html += "<li>" + json.s[i] + "</li>";
}
$("#search-result").html(html);
$("#search_suggest")
.show()
.css({
top:
$("#search-form").offset().top +
$("#search-form").outerHeight(),
left: $("#search-form").offset().left,
position: "absolute"
});
}
};
var script = document.createElement("script");
script.src = sugurl;
document.getElementsByTagName("head")[0].appendChild(script);
});
</script>
2019-04-10
可以的
2019-01-17
為什么只能出一個(gè)建議？
2019-01-05
這個(gè)是真的可以用
2018-11-09
2018-08-08
你的也不能用啊