                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

bing的獲取關(guān)鍵詞建議的api沒用了，我找了個百度的

先貼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方法獲取百度關(guān)鍵字搜索api結(jié)果，并展示搜索建議
$.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>

慕粉3122678

2018-08-05

源自：搜索框制作 2-6

關(guān)注問題我要回答

1495

操作

收起

3 回答

qq_幸福落雨_0
2018-12-22

<!DOCTYPE html>

<html>

<head>

? ? <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" charset=utf-8>

? ? <meta name=viewport content="width=device-width, initial-scale=1">

? ? <title>Document</title>

? ? <style type="text/css" media="screen">

? ? ? ? body{

? ? ? ? ? ? background-color:#333;

? ? ? ? }

? ? ? ? .bg-div{

? ? ? ? ? ? background-image: url(river.jpg);

? ? ? ? ? ? width:1228px;

? ? ? ? ? ? height:690px;

? ? ? ? margin: 0 auto;

? ? ? ? position:relative;

? ? ? ? }

? ? ? ? .logo{

? ? ? ? ? ? background-image: url(logo.png);

? ? ? ? ? ? width:107px;

? ? ? ? ? ? height:53px;

? ? ? ? ? ? float: left;

? ? ? ? ? ? margin: -4px 18px 0 0;

? ? ? ? }

? ? ? ? form{

? ? ? ? ? ? float: left;

? ? ? ? ? ? background-color:#fff;

? ? ? ? ? ? padding:5px;

? ? ? ? }

? ? ? ? .search-input-text{

? ? ? ? ? ? border:0;

? ? ? ? ? ? float: left;

? ? ? ? ? ? height: 25px;

? ? ? ? ? ? line-height: 25px;

? ? ? ? ? ? outline:none;

? ? ? ? ? ? width: 350px;

? ? ? ? }

? ? ? ? .search-input-button{

? ? ? ? ? ? border:0;

? ? ? ? ? ? background-image: url(search-button.png);

? ? ? ? ? ? width:29px;

? ? ? ? ? ? height: 29px;

? ? ? ? ? ? float: left;

? ? ? ? }

? ? ? ? .search-box{

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? top: 150px;

? ? ? ? ? ? left:200px;

? ? ? ? }

? ? ? ? .suggest{

? ? ? ? ? ? width: 388px;

? ? ? ? ? ? background-color:#fff;

? ? ? ? ? ? border:1px solid #999;

? ? ? ? }

? ? ? ? .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>

</head>

<body>

? ? <div class="bg-div">

? ? ? ? <div class="search-box">

? ? ? ? ? ? <div class="logo"></div>

? ? ? ? ? ? <form id="search-form" action="https://cn.bing.com/search" target="_blank">

? ? ? ? ? ? ? ?<input type="text" class="search-input-text" name="q" id="search_input" autocomplete="off">

? ? ? ? ? ? ? ?<input type="submit" class="search-input-button" value="">

? ? ? ? ? ? </form>

? ? ? ? </div>

? ? </div>

? ? <div class="suggest" id="search-suggest" style="display: none;">

? ? ? ? <ul id="search-result">

? ? ? ? ? ? <li>搜索結(jié)果1</li>

? ? ? ? ? ? <li>搜索結(jié)果2</li>

? ? ? ? </ul>

? ? </div>

? ? <script>

? ? ? ? $("#search_input").bind('keyup',function(){

? ? ? ? ? ? var jqueryInput=$(this);

? ? ? ? ? ? var searchText=jqueryInput.val();

? ? ? ? ? ? $.ajax({

? ? ? ? ? ? ? ? ? ? url: 'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText,

? ? ? ? ? ? ? ? ? ? type: 'get',

? ? ? ? ? ? ? ? ? ? jsonp: "cb",

? ? ? ? ? ? ? ? ? ? dataType: 'jsonp',

? ? ? ? ? ? ? ? ? ? success:function(d){

? ? ? ? ? ? ? ? ? ? ? ? var d=d.AS.Results[0].Suggests;

? ? ? ? ? ? ? ? ? ? ? ? var html='';

? ? ? ? ? ? ? ? ? ? ? ? for(var i=0;i<d.length;i++){

? ? ? ? ? ? ? ? ? ? ? ? ? ? html+='<li>'+d[i].Txt+'</li>';

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? $("#search-result").html(html);

? ? ? ? ? ? ? ? ? ? ? ? $('#search-suggest').show().css({

? ? ? ? ? ? ? ? ? ? ? ? top:$('#search-form').offset().top+$('#search-form').height()+10,

? ? ? ? ? ? ? ? ? ? ? ? left:$('#search-form').offset().left,

? ? ? ? ? ? ? ? ? ? ? ? position:"absolute"

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? })

});

$(document).bind('click',function(){

? ? $('#search-suggest').hide();

});

$(document).delegate('li','click',function(){

? ? var keyword=$(this).text();

? ? location.+keyword;

});

? ? </script>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕粉3122678 提問者
2018-10-09

這個api后面直接加上你要搜索的關(guān)鍵詞，比如說搜索“2”，就是這樣：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=2

這是百度API返回的結(jié)果，直接在瀏覽器地址欄輸入就可以得到。

這是返回結(jié)果，直接用就行了。

1	`window.baidu.sug({q:?"2",p:?false,s:?["2018年日歷",?"2019年春節(jié)",?"2018年放假安排時間表",?"2019年日歷",?"24點(diǎn)計算器",?"21世紀(jì)人才網(wǎng)",?"263企業(yè)郵箱",?"263",?"2345",?"233網(wǎng)校"]});`