百度等搜尋引擎智慧提示（JSONP跨域實現自動補全搜尋建議）
---------------------------------------搜尋引擎JSONP介面---------------------------------------------
提示：URL中的 #content# 為搜尋的 關鍵字
1.谷歌（Google）
callback：window.google.ac.h
window.google.ac.h(["關鍵字",[["關鍵字",0],["關鍵字 歌詞",0],["關鍵字引數",0],["關鍵字 lyrics",0],["關鍵字過濾",0],["關鍵字排名",0],["關鍵字查詢",0],["關鍵字提取演算法",0],["關鍵字規劃師可通過以下哪種方式幫助您製作新的搜尋網路廣告系列",0],["關鍵字優化",0]],{"k":1,"q":"uhaB8ZMjzJay-BACee_C0eVdUCA"}])
2.必應（Bing）
callback：window.bing.sug
if(typeof window.bing.sug == 'function') window.bing.sug({"AS":{"Query":"關鍵字","FullResults":0}} /* pageview_candidate */);
3.百度（Baidu）
callback：window.baidu.sug
window.baidu.sug({q:"關鍵字",p:false,s:["關鍵字搜尋排名","關鍵字怎麼優化","關鍵字查詢工具","關鍵字推廣","關鍵詞優化","關鍵詞排
名","關鍵字 英文","關鍵詞挖掘","關鍵詞查詢","關鍵詞搜尋"]});
4.好搜（So）
callback：window.so.sug
window.so.sug({"query":"關鍵字","result":[{"word":"關鍵字查詢"},{"word":"關鍵字工具"},{"word":"關鍵字查詢工具"},{"word":"關鍵字挖
掘"},{"word":"關鍵字搜尋"},{"word":"關鍵字英文"},{"word":"關鍵字是什麼"},{"word":"關鍵字廣告"},{"word":"關鍵字分析"},{"word":"關鍵
字規劃師"}],"version":"b","rec":""});
5.搜狗（Sogou）
callback：window.sogou.sug
window.sogou.sug(["關鍵字",["關鍵字查詢","關鍵字搜尋","關鍵字優化","關鍵字規劃師","關鍵字查詢lol","關鍵字是什麼意思","關鍵字
搜尋工具","關鍵字廣告圖片","關鍵字排名查詢","關鍵字生成器"],
["0;0;0;0","1;0;0;0","2;0;0;0","3;0;0;0","4;0;0;0","5;0;0;0","6;0;0;0","7;0;0;0","8;0;0;0","9;0;0;0"],["","","","","","","","","",""],
["0"],"","suglabId_1"],-1);
6.淘寶（Taobao）
callback：window.taobao.sug
window.taobao.sug({"result":[["關鍵字推廣","204"],["關鍵字seo","198"],["關鍵字 網站","182"],["關鍵字搜尋","119"],["關鍵字軟體","44"],
["關鍵字首頁","50"],["關鍵字收錄","35"],["關鍵字採集","16"],["關鍵字採集器","10"],["網站關鍵字","180"]]})
---------------------------------------搜尋建議使用方式---------------------------------------------
以百度為例，API返回的是JSONP資料，JSONP是跨域訪問的一種方式。由於伺服器返回的JavaScript程式碼可以直接引用，通過回
調函式的方式就可以間接的獲取伺服器的資料。
下面是一個回撥搜尋建議的例子，window.baidu.sug 返回的是一個json物件
<body>
請輸入：<input id="content" type="text" />
</body><script type="text/javascript">
window.onload = function() {
//組裝查詢地址
var sugurl = "http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug";
var content = "新聞";
sugurl = sugurl.replace("#content#", content);
//定義回撥函式
window.baidu = {
sug: function(json) {
console.log(json)
}
}
//動態新增JS指令碼
var script = document.createElement("script");
script.src = sugurl;
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>控制檯列印的結果：如果要將結果儲存在一個字串陣列中，只需要 var arr = json.s 即可。
如圖：
以上是轉載內容，我們也可以用ajax來獲取百度搜索框的資料，同樣也使用jsonp的跨域方式
以百度為例：
首先，我們得先找到百度搜索框的介面，獲取裡面的資料，再傳到我們自己的頁面上，獲取到的介面是
怎樣獲取百度的介面？開啟百度首頁，按下F12開啟開發者工具，在百度搜索框中隨便輸入欄位，在Network中抓取到介面；抓取之後，就可以進行操作了，我用的是jQuery寫的程式碼；
<body>
請輸入：<input list="languageList" id="value" type="text" />
<datalist id="languageList" >
</datalist>
</body><script>
/*設定監聽事件，向輸入框中輸入內容，當鍵盤按鍵彈起的時候，將輸入的內容作為引數傳入到函式info中*/
$("#value").bind("keyup",function(event){
/*當鍵盤按下上下鍵的時候，不進行監聽，否則會與keyup事件起衝突*/
if(event.keyCode == 38 || event.keyCode == 40){
return false;
}
var value = $("#value").val();
info(value);
})
/*將ajax封裝到函式中*/
function info(value){
/*百度搜索框智慧提示的介面*/
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
/*需要傳入的引數，cb是callback的縮寫*/
var data = {
wd : value,
cb : "helloword"
}
/*因為涉及跨域，這裡使用jsonp*/
$.ajax({
url : url,
data : data,
type : "GET",
dataType : "jsonp",
jsonpCallback : "helloword",
/*跨域成功的時候返回的資料*/
success : function (result){
/*返回成功之後可以在開發者工具裡的Console列印看一下*/
console.log(result);
/*將獲取的資料整理後返回到頁面*/
var a = result.s;
var list = "";
for(var i in a ){
var l = a[i];
list += "<option>"+l+"</option>";
}
$("#languageList").html(list);
},
/*跨域失敗的時候返回的資料*/
error : function(){
console.log("error");
}
})
}
</script>看一下效果圖：
