各位同好，這篇文章是關于如何在自己的網站中實現百度搜索框的效果，所利用的是jsonp相關的知識點，所以在代碼實現之前先普及一下jsonp是用來干嘛的。
首先，我們知道jsonp是用來跨域的，那么，為什么要跨域呢，這里就是因為瀏覽器有一個同源策略的機制，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。
這里可能用朋友就會疑問，什么叫做同源，同源嘛，字面意思理解就是同一個源，所以，關鍵是在“源”上面。
一個源的定義 (詳情)
如果協(xié)議，端口（如果指定了一個）和主機對于兩個頁面是相同的，則兩個頁面具有相同的源。
因為這個機制，所以，今天我們要做的在你的個人網站上實現百度搜索的阻礙就是這個，那么jsonp就是來解決這個問題的。
知道了為什么要使用jsonp，那它到底是如何實現的呢？
早在很久以前，為了解決這個問題，機智的前輩們就發(fā)現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發(fā)現凡是擁有"src"這個屬性的標簽都擁有跨域的能力，比如script、img、iframe）
首先我們來看一下，百度本身是怎么做的。
打開chrome，在chrome的調試窗口下看看百度搜索發(fā)出的請求。當輸入關鍵字“LOL”，如下圖：
這里產生了一條類型為script的請求，這就是我們需要的東西，可以點開看一下里面是什么
我們可以看到一個名為“JQuery110204094770724259329_1479977887752”的對象，這個對象里包含的，就是我們所需要的數據，比如圖片上對象下方的，g , p , q , s 這些，那這個對象是怎么被請求過來的呢？
我們分析這個地址，我把它復制下來
可以在鏈接的末尾看到我們熟悉的名字，所以我們可以知道，服務器是通過這個字段&cb=jQuery110204094770724259329_1479977887752將我們所需要的數據打包過來的，那我們如何接收呢，就是通過script標簽的src
例如：
<script src="http://www.baidu.com/su?wd='+關鍵字+'&cb=方法名';">
補充：經測試鏈接中間的那些可有可無，所以在這里將他們都刪除了，只留下最重要的不能缺少的，還有就是方法名是可以隨自己的喜好隨意取名的。關鍵字就是你在輸入框里所輸入的內容，我們會用this.value代替。
那么現在，這個數據就被我們加載到了自己的頁面中，就在這個方法名里面，接下來我們只需要將它解析出來，就可以為我們所用了。
弄清楚了上面這些，下面就開始實現我們今天要實現的百度搜索智能提示功能。
首先是HTML+CSS部分
<style>
#keywords {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#relative {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
body>
<input type="text" id="keywords" />
<ul id="relative"></ul>
</body>
然后是js部分，做一下數據解析并在頁面渲染出來的工作。
<script>
//在這里通過myNeed函數解析數據
function myNeed(data) {
var relative = document.getElementById('relative');
var html = '';
//由上文知道，我們所需要的字段都在s里面存放著
if (data.s.length) {
relative.style.display = 'block';
//這里可以限制一下所需要聯想詞的個數，太多了也沒必要
for (var i=0; i<data.s.length-5; i++) {
html += '<li><a target="_blank" + data.s[i] +'</a></li>';
}
//渲染到頁面里
relative.innerHTML = html;
} else {
relative.style.display = 'none';
}
}
window.onload = function() {
var keywords = document.getElementById('keywords');
var relative = document.getElementById('relative');
//每當有鍵盤事件的時候都要有相對應的聯想詞
keywords.onkeyup = function() {
//如果有輸入內容的時候，就生成一個script標簽獲取數據
if ( this.value != '' ) {
var oScript = document.createElement('script');
oScript.src = 'http://www.baidu.com/su?wd='+this.value+'&cb=myNeed';
document.body.appendChild(oScript);
} else {
relative.style.display = 'none';
}
}
}
</script>
以上就是今天我們所要講的內容了，重點我們總結一下，首先知道如何獲取數據(通過script標簽)，然后再通過解析出對象中所包含的數據并渲染到頁面中來達到我們的目的，實現手法多種多樣，但原理都是一樣的，所以弄清楚了原理，隨便你想怎么玩都可以。就是這么簡單~
在最后，感謝彭創(chuàng)同學
上面所用的demo在我的GitHub里，歡迎路過的同學star，O(∩_∩)O~
