百度首頁搜索框是這樣的一個基本形式肩祥，我們搜索框里輸入字符時就能顯示出一些有關的聯(lián)想詞后室，如圖2所示
那么今天我們來寫一下這種效果，不算一模一樣混狠，大概相同吧岸霹，哈哈。
第一步：在html文檔中搭建出類似的框架将饺，給出類似的樣式贡避，基本頁面布局實現(xiàn)大致一樣，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<style>
*{
margin: 0;
padding: 0;
}
.show{
margin: 10px auto;
width: 340px;
}
#text{
/*去掉默認樣式*/
appearance:none;
width:250px;
height: 20px;
outline:0;
}
#go{
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 25px;
border: 0;
width:70px;
height: 25px;
font-size: 14px;
color: white;
background-color: rgb(33,134,250);
}
.search{
width:252px;
border:1px solid #ccc;
display: none;
}
ul{
list-style: none;
}
li{
line-height: 20px;
font-size: 14px;
cursor:pointer;
box-sizing: border-box;
padding:0 5px;
}
li:hover{
background-color: rgb(230,230,230);
}
</style>
</head>
<body>
<center><img src="baidu.png" alt=""></center>
<div class="show">
<input type="text" id="text">
<a href="" id="go">百度一下</a>
<div class="search">
<ul>
</ul>
</div>
</div>
</body>
</html>
效果如下圖：
接下來是我們必須要知道的一些事：
1予弧、在哪輸入
2刮吧、什么情況下會出現(xiàn)聯(lián)想詞列表，什么情況下消失
3掖蛤、這些聯(lián)想詞的數(shù)據(jù)來自哪里
答案是：
1杀捻、在輸入框中輸入內容
2、如果輸入框中為空蚓庭，就不會出現(xiàn)聯(lián)想列表致讥；如果輸入框中有內容，那么讓聯(lián)想列表出現(xiàn)
3器赞、關于這些聯(lián)想詞的數(shù)據(jù)垢袱，我們可以借用百度接口來獲取，百度通過url接口將數(shù)據(jù)傳出港柜，url就是指http://www.baiidu.com地址请契，我們才可以通過這個鏈接訪問服務器的資源，瀏覽器只是這些資源的載體，那么這里就涉及到跨域請求姚糊，在我們所學的內容里贿衍，可以想到script標簽的src屬性可以引入外部文件，比如引入JQ插件救恨，因此可以實現(xiàn)跨域請求贸辈。
再接著，我們來了解一下百度鏈接地址
先在百度搜索框里輸入任意字符肠槽，按回車鍵確認搜索
這里我標記了四個地方擎淤，首先看地址欄，s?前面是資源占位符秸仙，稱為地址嘴拢；？后面是參數(shù)寂纪，我們向百度申請的資源不同席吴，參數(shù)就不同，在這里我們搜索的是1捞蛋，所以wd屬性為1.
再看Network下面的標記孝冒，這個請求就是我們發(fā)送的，然后它通過script標簽訪問到后面的js腳本
我們右擊上圖 劃線處拟杉，拷貝鏈接到新窗口打開
我們看到一串很長的鏈接是吧庄涡，看不懂好像，哈哈搬设，顯示內容里面好像有我們想要請求的數(shù)據(jù)穴店，我們再將它簡化一下，刪除我上圖劃線的部分拿穴，得到下圖：
繼續(xù)簡化泣洞，刪除我上圖劃線的部分，得到下圖：
再觀察這個圖片贞言，我劃線的兩個部分是一樣的斜棚，其實它也是可以替換的，我們將鏈接中劃線部分替換為任意一個名字 lyl ,得到下圖;
替換得沒問題该窗，如果我們不看紅色框里面的內容弟蚀，是不是看起來想一個函數(shù)執(zhí)行 lyl()
所以它的返回值類似是一個函數(shù)執(zhí)行，函數(shù)里面（括號里面）的參數(shù)是是json鍵值對酗失，所以這些鍵值對可以當做參數(shù)傳入义钉。
說到這里，我們還必須知道一個事规肴，通常用戶都會在百度搜索框里輸入向搜索的內容捶闸，還有另外一方式夜畴，如下圖：
只需在http://www.baidu.com后面加上/s?wd=xxxx就行
好了，只需了解這么多就差不多了删壮。
下面在</dody>標簽后面插入下面代碼贪绘，就能得到我們想要的搜索框了
<script>
var text = document.getElementById('text');
var search = document.getElementsByClassName('search')[0];
var oul = document.querySelector(".search ul");
var go =document.getElementById("go");
// 每次鍵盤抬起
text.onkeyup = function(){
// 獲取輸入框里面的內容
var val = this.value;
// 如果輸入框中不為空，就讓聯(lián)想列表出現(xiàn)央碟，否則消失
search.style.display=this.value!=""?"block":"none";
// 每次松開鍵盤税灌，都要通過script標簽向百度接口獲取數(shù)據(jù)
// 所以每次松開鍵盤都要生成一個script標簽，通過src屬性來跨域請求
var sc = document.createElement("script");
sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+ val+"&cb=lyl";
document.body.appendChild(sc);
}
// data參數(shù)就是鏈接返回的json數(shù)據(jù)亿虽，data是一個對象,data.s就是我們找的聯(lián)想詞
function lyl(data){
// console.log(data);
oul.innerHTML="";//清空
// 數(shù)組遍歷forEach,里面有回調函數(shù)
data.s.forEach(function(el){
// console.log(el);
// 生成li
var lis = document.createElement("li");
// li鏈接到的地址<a href='https://www.baidu.com/s?wd=el
lis.innerHTML = "<a ;
oul.appendChild(lis);
})
}
</script>
最后附上我代碼里面用到的圖片
OKＡ獾印！洛勉！
