使用jsonp实现百度关键词下拉提示

发表于 | 分类于

使用到的百度jsonP接口地址：
http://suggestion.baidu.com/su?wd=关键词(aa)&cb=回调函数名(callback)

使用这个格式请求时，会得到一个回调函数（这里使用的关键词是aa，回调函数名是callback）：

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
callback({q: "aa", p: false,…});
p
:
false
q
:
"aa"
s
:
["aape官网", "aaa", "aabc形式的词语", "aape", "aac", "aae", "aa电池", "aar", "aas", "aabb"]
0
:
"aape官网"
1
:
"aaa"
2
:
"aabc形式的词语"
3
:
"aape"
4
:
"aac"
5
:
"aae"
6
:
"aa电池"
7
:
"aar"
8
:
"aas"
9
:
"aabb"

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>

效果如下：
效果图