話不多說，先上效果圖。
怎么樣，是不是和在用百度一下時，關鍵字搜索補全一樣一樣的。
今天下午沒什么事，打開百度首頁的Newwork看了一下，發現我每次輸入內容后，它都會把我們輸入的內容發送到后台，后台返回這些關鍵字的聯想條目，我們只需要把這些條目放到頁面中，就可以實現上圖所示的demo了。
下面我們就來看看怎么獲取這些內容。
先打開百度首頁，我是用的chrome瀏覽器，F12，選到Network（你可能發現Network中是空的，刷新一下頁面就好了）：
看到一大堆請求過來的文件，下面我們要找到關鍵的文件，也就是我們輸入時，百度返回的文件，最快速的方法就是輸入一大堆的字母，這樣可以很方便的找到,我輸入了一大堆的ssssss.....：
看到這些返回的文件嗎，wd=ssssssssssss....，我們隨便雙擊一條，把彈出窗口中的Request URL里的網址復制下來，這個就是我們完成關鍵字搜索的請求路徑。
我們可以把網址直接復制到瀏覽器地址欄，看看得到的是個什么東西:
1 jQuery110204129574971066774_1467359127325({ 2 "q": "哈哈是什么yisi", 3 "p": true, 4 "bs": "", 5 "csor": "9", 6 "g": [ 7 { 8 "q": "哈哈是什么意思", 9 "t": "n", 10 "st": { 11 "q": "哈哈是什么意思", 12 "new": 0 13 } 14 }, 15 { 16 "q": "哈哈哈哈是什么意思", 17 "t": "n", 18 "st": { 19 "q": "哈哈哈哈是什么意思", 20 "new": 0 21 } 22 } 23 ], 24 "s": [ 25 "哈哈是什么意思", 26 "哈哈哈哈是什么意思" 27 ] 28 });
得到的數據是一個對象，不過對象被包裹在一個函數內，這個格式是不是很熟悉啊，對，就是jsonp！分析完這個數據格式，發現我們需要的是這個對象下的s數組里的數據，那我們就把s里的數據拿出來插入到頁面中就行了，開始吧！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> </head> <body> <input type="text" onkeyup="require()" id="search"/> <div id="show"></div> <script> //do something...... </script> </body> </html>
這段html代碼很簡單，引入了jQuery，一個輸入框，一個承載返回內容的div，我么直接把script寫在body的最下面，當我么輸入時手指抬起，就去調用require函數，這個函數里就是我們的關鍵代碼。（大家可以想想為什么要用onkeyup，這是個坑）
1 function require(){ 2 var search = $("#search").val(); 3 var _url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+search+'&json=1&p=3&sid=20144_1467_19033_20515_18240_17949_20388_20456_18133_17001_15202_11615&req=2&csor=2&pwd=s&cb=jQuery110207612423721154653_1467355506619&_=1467355506623'; 4 $.ajax({ 5 type:"get", 6 url:_url, 7 async:true, 8 dataType:'jsonp', 9 jsonpCallback:'jQuery110207612423721154653_1467355506619', 10 success:function(data){ 11 console.log(data); 12 var list = data.s; 13 var str =""; 14 for(var i in list){ 15 str+='<p>'+list[i]+'</p>'; 16 } 17 $("#show").html(str); 18 } 19 }); 20 }
當require函數被觸發時，執行以上代碼，我們來分析一下上面的代碼。
先獲取到輸入框的內容，再定義一個_url，把我們之前得到的url地址附給這個變量，但是注意要把關鍵字的值改成輸入框內的值，這樣才能動態獲取，不然你一直都在請求一個固定的關鍵字（上面把_url中的search標紅加粗了）。
准備工作做好，可以發起ajax請求了，因為是jsonp的格式，所以要設置dataType:'jsonp'，並告訴jQuery回調函數的名稱，這個名稱可以在瀏覽器中得到（之前在瀏覽器地址欄輸入url，得到的數據被包含在一個函數里，這里的jsonpCallback就寫那個函數的名稱，每個人的都不一樣）。
現在我們只需要把數據console.log出來，並解析到頁面上，就可以實現文章開頭的效果了，簡單吧！(記得放在服務器環境運行哦！)下面附上源碼：
