JS實現(xiàn)百度搜索框

更新時間：2021年02月25日 14:53:27 作者：張先生的blog

這篇文章主要為大家詳細介紹了JS實現(xiàn)百度搜索框，實時返回搜索建議項，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)百度搜索框的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)原理

向輸入框動態(tài)輸入時關(guān)鍵詞，將當前關(guān)鍵詞作為問號參數(shù)后面的值，因為要跨域使用百度的接口，所以通過 JSONP 跨域創(chuàng)建 Ajax 請求?；卣{(diào)函數(shù)處理返回值。

嘗試研究了一下百度的接口，發(fā)現(xiàn)原生的 XHR 接口參數(shù)有點復雜(百度應該是考慮了很多情況)。

找了一個 2345 導航，在輸入框隨便輸入一個字母 s，打開 Network,發(fā)現(xiàn)它也是向百度的一個地址發(fā)送了請求，其中問號后面的‘&wd=s'發(fā)送的就是此關(guān)鍵詞，'&cb='應該就是回調(diào)處理函數(shù)，并且它的 Type 也是 script，2345 導航應該也是通過 JSONP 向百度獲取數(shù)據(jù)的。

var script = document.createElement("script");
script.src =
 "https://www.baidu.com/su?&wd=" +
 encodeURI(this.value.trim()) +
 "&p=3&cb=handleSuggestion";
document.body.appendChild(script);

點開那條請求，果然在里面看到了返回的數(shù)據(jù)。返回的結(jié)果是以一個對象的形式返回的。q 對應著檢索關(guān)鍵詞，s 對應著返回的結(jié)果(數(shù)組形式)

后續(xù)只需要動態(tài)創(chuàng)建 li 標簽，設置里面的內(nèi)容，以及注意其他細節(jié)問題。

1.使用 flex 布局實現(xiàn)搜索框的水平垂直居中。

坑設置完 flex 屬性之后發(fā)現(xiàn)并沒有水平垂直居中，當時設置了父盒子 height:100%,發(fā)現(xiàn)如果將 height 設置成具體值就可以實現(xiàn)居中。懷疑是設置了%高度無效，查了一下，高度百分比是相對于父盒子的，也就是 body。默認 html 和 body 是沒有設置 height 的。另外，在布局中對于沒有設置寬高的塊狀盒子，寬度默認是 100%的，高度是由里面的內(nèi)容自然撐開的。

2.先獲取常用的 DOM 節(jié)點，避免后續(xù)頻繁查詢操作 DOM。

3.為了避免在輸入過程中頻繁發(fā)送請求(如果打字速度快),對請求函數(shù)做了函數(shù)節(jié)流，調(diào)了一下間隔 130ms 差不多正好，時間再長就會有卡頓的感覺。使用了 ES6 中的箭頭函數(shù)避免了 setTimeout 中 this 指向的問題。

4.在回調(diào)函數(shù)中：

每一次執(zhí)行時首先要清除建議框里的內(nèi)容，不然上一次的結(jié)果還會存在建議框里！截取了結(jié)果中的前五個(如果把所有結(jié)果都展示出來感覺有點丑…百度官方是展示前四個搜索建議)
結(jié)果處理完畢后，執(zhí)行自執(zhí)行匿名函數(shù)，刪除創(chuàng)建的 script 標簽;

5.由于 li 是動態(tài)創(chuàng)建的，點擊 li 標簽或者點擊"搜索一下"跳轉(zhuǎn)百度進行搜索時，利用事件冒泡原理，進行事件委托。這里沒有考慮兼容性問題：

e = e || window.event;
target = e.target || e.srcElement;

6.除了點擊事件，鍵盤事件–回車鍵以及上下鍵都是進行事件委托進行注冊的。

最終能夠?qū)崿F(xiàn)鍵盤上下鍵鼠標選擇，點擊“搜索一下”或回車鍵實現(xiàn)跳轉(zhuǎn)搜索。

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- 兼容性視圖 -->
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta content="更方便快捷搜索，從而達到事半功倍的效果" name="description">
 <title>search you want</title>
 <style>
 html {
 height: 100%;
 }

 body {
 background: #f0f3ef;
 height: 100%;
 }

 .container {
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 }

 .bgDiv {
 box-sizing: border-box;
 width: 595px;
 height: 55px;
 position: relative;
 /* position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); */
 }

 .search-input-text {
 border: 1px solid #b6b6b6;
 width: 495px;
 background: #fff;
 height: 33px;
 line-height: 33px;
 font-size: 18px;
 padding: 3px 0 0 7px;
 }

 .search-input-button {
 width: 90px;
 height: 38px;
 color: #fff;
 font-size: 16px;
 letter-spacing: 3px;
 background: #3385ff;
 border: .5px solid #2d78f4;
 margin-left: -5px;
 vertical-align: top;
 opacity: .9;
 }

 .search-input-button:hover {
 opacity: 1;
 box-shadow: 0 1px 1px #333;
 cursor: pointer;
 }

 .suggest {
 width: 502px;
 position: absolute;
 top: 38px;
 border: 1px solid #999;
 background: #fff;
 display: none;
 }

 .suggest ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

 .suggest ul li {
 padding: 3px;
 font-size: 17px;
 line-height: 25px;
 cursor: pointer;
 }

 .suggest ul li:hover {
 background-color: #e5e5e5
 }
 </style>
</head>

<body>
 <div class="container">
 <div class="bgDiv">
 <input type="text" class="search-input-text" value="" autofocus placeholder="關(guān)鍵詞">
 <input type="button" value="搜索一下" class="search-input-button" id="btn">
 <div class="suggest">
 <ul id="search-result">
 </ul>
 </div>
 </div>
 </div>

 <script>
 var suggestContainer = document.getElementsByClassName("suggest")[0];
 var searchInput = document.getElementsByClassName("search-input-text")[0];
 var bgDiv = document.getElementsByClassName("bgDiv")[0];
 var searchResult = document.getElementById("search-result");

 // 清除建議框內(nèi)容
 function clearContent() {
 var size = searchResult.childNodes.length;
 for (var i = size - 1; i >= 0; i--) {
 searchResult.removeChild(searchResult.childNodes[i]);
 }
 };

 var timer = null;
 // 注冊輸入框鍵盤抬起事件
 searchInput.onkeyup = function (e) {
 suggestContainer.style.display = "block";
 // 如果輸入框內(nèi)容為空 清除內(nèi)容且無需跨域請求
 if (this.value.length === 0) {
 clearContent();
 return;
 }
 if (this.timer) {
 clearTimeout(this.timer);
 }
 if (e.keyCode !== 40 && e.keyCode !== 38) {
 // 函數(shù)節(jié)流優(yōu)化
 this.timer = setTimeout(() => {
 // 創(chuàng)建script標簽JSONP跨域
 var script = document.createElement("script");
 script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
 "&p=3&cb=handleSuggestion";
 document.body.appendChild(script);
 }, 130)
 }

 };

 // 回調(diào)函數(shù)處理返回值
 function handleSuggestion(res) {
 // 清空之前的數(shù)據(jù)！！
 clearContent();
 var result = res.s;
 // 截取前五個搜索建議項
 if (result.length > 4) {
 result = result.slice(0, 5)
 }
 for (let i = 0; i < result.length; i++) {
 // 動態(tài)創(chuàng)建li標簽
 var liObj = document.createElement("li");
 liObj.innerHTML = result[i];
 searchResult.appendChild(liObj);
 }
 // 自執(zhí)行匿名函數(shù)--刪除用于跨域的script標簽
 (function () {
 var s = document.querySelectorAll('script');
 for (var i = 1, len = s.length; i < len; i++) {
 document.body.removeChild(s[i]);
 }
 })()
 }


 function jumpPage() {
 window.open(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`);
 }

 // 事件委托 點擊li標簽或者點擊搜索按鈕跳轉(zhuǎn)到百度搜索頁面
 bgDiv.addEventListener("click", function (e) {
 if (e.target.nodeName.toLowerCase() === 'li') {
 var keywords = e.target.innerText;
 searchInput.value = keywords;
 jumpPage();
 } else if (e.target.id === 'btn') {
 jumpPage();
 }
 }, false);

 var i = 0;
 var flag = 1;

 // 事件委托 監(jiān)聽鍵盤事件
 bgDiv.addEventListener("keydown", function (e) {
 var size = searchResult.childNodes.length;
 if (e.keyCode === 13) {
 jumpPage();
 };
 // 鍵盤向下事件
 if (e.keyCode === 40) {
 if (flag === 0) {
 i = i + 2;
 }
 flag = 1;
 e.preventDefault();
 if (i >= size) {
 i = 0;
 }
 if (i < size) {
 searchInput.value = searchResult.childNodes[i++].innerText;
 }
 };
 // 鍵盤向上事件
 if (e.keyCode === 38) {
 if (flag === 1) {
 i = i - 2;
 }
 flag = 0;
 e.preventDefault();
 if (i < 0) {
 i = size - 1;
 }
 if (i > -1) {
 searchInput.value = searchResult.childNodes[i--].innerText;
 }
 };
 }, false);

 // 點擊頁面任何其他地方 搜索結(jié)果框消失
 document.onclick = () => clearContent()
 </script>
</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: