使用到的百度jsonP接口地址：
http://suggestion.baidu.com/su?wd=关键词(aa)&cb=回调函数名(callback)
使用这个格式请求时，会得到一个回调函数（这里使用的关键词是aa，回调函数名是callback）：
1
2
3
4
5
| callback({
q: "java",
p: false,
s: ["java", "java是什么意思", "java培训", "javascript", "java自行车", "java基础知识点", "javaguide", "java环境变量配置", "java面试题", "java游戏"]
});
|
html代码：
1
2
3
4
5
| <p>使用jsonP实现百度关键词下拉提示</p>
<input type="text" name="" id="wd" autofocus>
<ul id="ul1">下拉框，用于存放返回的关键词</ul>
|
CSS代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <style>
p{
color: #bf6900;
font-size: 24px;
}
#wd{
border: none;
padding-left: 5px;
line-height: 40px;
font-size: 24px;
border: 1px solid #aaaaaa;
border-color: #bf6900;
width: 394px;
height: 40px;
outline: none;
}
#ul1{
padding: 0;
margin: 0;
width: 400px;
border: 1px solid #bf6900;
display: none;
}
#ul1 li a{
font-size: 24px;
padding: 5px 0;
text-decoration: none;
display: block;
color: #bf6900;
padding-left: 5px;
}
#ul1 li a:hover{
color: white;
background-color: #bf6900;
}
</style>
|
javascript代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <script>
//回调函数，需定义为全局函数
function callback(data){
var oUl1 = document.getElementById('ul1');
var html = '';
if (data.s.length!=''){
//将返回的数据插入下拉框中
oUl1.style.display = 'block';
for(var i=0;i<data.s.length;i++){
html +='<li><a target="#data" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
}
oUl1.innerHTML = html;
}else{
//没有匹配的关键词时，隐藏下拉框
oUl1.style.display = 'none';
}
}
window.onload = function () {
var ul1 = document.getElementById('ul1');
var wd = document.getElementById('wd');
//按键弹起触发jsonP请求
wd.onkeyup = function () {
if (this.value!=''){
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=callback';
document.body.appendChild(oScript);
}else {
ul1.style.display = "none";
}
}
}
</script>
|
效果如下：
转载：https://www.jianshu.com/p/edefb0676606
