百度搜狗等搜索引擎智能提示(JSONP跨域實現自動補全搜索建議)

轉自:http://www.cnblogs.com/woider/p/5805248.html


---------------------------------------搜索引擎JSONP接口---------------------------------------------

提示:URL中的 #content# 爲搜索的 關鍵字

谷歌(Google)

http://suggestqueries.google.com/complete/search?client=youtube&q=#content#&jsonp=window.google.ac.h

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"}])

 

必應(Bing)

http://api.bing.com/qsonhs.aspx?type=cb&q=#content#&cb=window.bing.sug

 callback:window.bing.sug

if(typeof window.bing.sug == 'function') window.bing.sug({"AS":{"Query":"關鍵字","FullResults":0}} /* pageview_candidate */);

 

百度(Baidu)

http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug

callback:window.baidu.sug

window.baidu.sug({q:"關鍵字",p:false,s:["關鍵字搜索排名","關鍵字怎麼優化","關鍵字查詢工具","關鍵字推廣","關鍵詞優化","關鍵詞排名","關鍵字 英文","關鍵詞挖掘","關鍵詞查詢","關鍵詞搜索"]});

 

好搜(So)

https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&word=#content#&callback=window.so.sug

callback:window.so.sug

window.so.sug({"query":"關鍵字","result":[{"word":"關鍵字查詢"},{"word":"關鍵字工具"},{"word":"關鍵字查詢工具"},{"word":"關鍵字挖掘"},{"word":"關鍵字搜索"},{"word":"關鍵字英文"},{"word":"關鍵字是什麼"},{"word":"關鍵字廣告"},{"word":"關鍵字分析"},{"word":"關鍵字規劃師"}],"version":"b","rec":""});

 

搜狗(Sogou)

 https://www.sogou.com/suggnew/ajajjson?type=web&key=#content#

 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);

 

 淘寶(Taobao)

 https://suggest.taobao.com/sug?code=utf-8&q=#content#&callback=window.taobao.sug

 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對象

複製代碼
        <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的跨域方式

以百度爲例:

首先,我們得先找到百度搜索框的接口,獲取裏面的數據,再傳到我們自己的頁面上,獲取到的接口是

[javascript] view plain copy
 print?
  1. https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su  

怎樣獲取百度的接口?打開百度首頁,按下F12打開開發者工具,在百度搜索框中隨便輸入字段,在Network中抓取到接口;

抓取之後,就可以進行操作了,我用的是jQuery寫的代碼;

[html] view plain copy
 print?
  1. <body>  
  2. 請輸入:<input list="languageList" id="value" type="text" />  
  3. <datalist id="languageList" >  
  4. </datalist>  
  5. </body>  



[javascript] view plain copy
 print?
  1. <script>  
  2.     /*設置監聽事件,向輸入框中輸入內容,當鍵盤按鍵彈起的時候,將輸入的內容作爲參數傳入到函數info中*/  
  3.     $("#value").bind("keyup",function(event){  
  4.         /*當鍵盤按下上下鍵的時候,不進行監聽,否則會與keyup事件起衝突*/  
  5.         if(event.keyCode == 38 || event.keyCode == 40){  
  6.             return false;  
  7.         }  
  8.         var value = $("#value").val();  
  9.             info(value);  
  10.     })  
  11.     /*將ajax封裝到函數中*/  
  12.     function info(value){  
  13.         /*百度搜索框智能提示的接口*/  
  14.         var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";  
  15.         /*需要傳入的參數,cb是callback的縮寫*/  
  16.         var data = {  
  17.             wd : value,  
  18.             cb : "helloword"  
  19.         }  
  20.         /*因爲涉及跨域,這裏使用jsonp*/  
  21.         $.ajax({  
  22.             url : url,  
  23.             data : data,  
  24.             type : "GET",  
  25.             dataType : "jsonp",  
  26.             jsonpCallback : "helloword",  
  27.             /*跨域成功的時候返回的數據*/  
  28.             success : function (result){  
  29.                 /*返回成功之後可以在開發者工具裏的Console打印看一下*/  
  30.                 console.log(result);  
  31.                 /*將獲取的數據整理後返回到頁面*/  
  32.                 var a = result.s;  
  33.                 var list = "";  
  34.                 for(var i in a ){  
  35.                     var l = a[i];  
  36.                     list += "<option>"+l+"</option>";  
  37.                 }  
  38.                 $("#languageList").html(list);  
  39.             },  
  40.             /*跨域失敗的時候返回的數據*/  
  41.             error : function(){  
  42.                 console.log("error");  
  43.             }  
  44.         })  
  45.     }  
  46. </script>  




看一下效果圖:





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章