JS實(shí)現(xiàn)百度搜索框
本文實(shí)例為大家分享了JS實(shí)現(xiàn)百度搜索框的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)原理向輸入框動(dòng)態(tài)輸入時(shí)關(guān)鍵詞，將當(dāng)前關(guān)鍵詞作為問(wèn)號(hào)參數(shù)后面的值，因?yàn)橐缬蚴褂冒俣鹊慕涌冢酝ㄟ^(guò) JSONP 跨域創(chuàng)建 Ajax 請(qǐng)求。回調(diào)函數(shù)處理返回值。
嘗試研究了一下百度的接口，發(fā)現(xiàn)原生的 XHR 接口參數(shù)有點(diǎn)復(fù)雜(百度應(yīng)該是考慮了很多情況)。
找了一個(gè) 2345 導(dǎo)航，在輸入框隨便輸入一個(gè)字母 s，打開(kāi) Network,發(fā)現(xiàn)它也是向百度的一個(gè)地址發(fā)送了請(qǐng)求，其中問(wèn)號(hào)后面的‘&wd=s’發(fā)送的就是此關(guān)鍵詞，’&cb=’應(yīng)該就是回調(diào)處理函數(shù)，并且它的 Type 也是 script，2345 導(dǎo)航應(yīng)該也是通過(guò) 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);
點(diǎn)開(kāi)那條請(qǐng)求，果然在里面看到了返回的數(shù)據(jù)。返回的結(jié)果是以一個(gè)對(duì)象的形式返回的。q 對(duì)應(yīng)著檢索關(guān)鍵詞，s 對(duì)應(yīng)著返回的結(jié)果(數(shù)組形式)
后續(xù)只需要?jiǎng)討B(tài)創(chuàng)建 li 標(biāo)簽，設(shè)置里面的內(nèi)容，以及注意其他細(xì)節(jié)問(wèn)題。
1.使用 flex 布局實(shí)現(xiàn)搜索框的水平垂直居中。
坑 設(shè)置完 flex 屬性之后發(fā)現(xiàn)并沒(méi)有水平垂直居中，當(dāng)時(shí)設(shè)置了父盒子 height:100%,發(fā)現(xiàn)如果將 height 設(shè)置成具體值就可以實(shí)現(xiàn)居中。懷疑是設(shè)置了%高度無(wú)效，查了一下，高度百分比是相對(duì)于父盒子的，也就是 body。默認(rèn) html 和 body 是沒(méi)有設(shè)置 height 的。另外，在布局中對(duì)于沒(méi)有設(shè)置寬高的塊狀盒子，寬度默認(rèn)是 100%的，高度是由里面的內(nèi)容自然撐開(kāi)的。
2.先獲取常用的 DOM 節(jié)點(diǎn)，避免后續(xù)頻繁查詢操作 DOM。
3.為了避免在輸入過(guò)程中頻繁發(fā)送請(qǐng)求(如果打字速度快),對(duì)請(qǐng)求函數(shù)做了函數(shù)節(jié)流，調(diào)了一下間隔 130ms 差不多正好，時(shí)間再長(zhǎng)就會(huì)有卡頓的感覺(jué)。使用了 ES6 中的箭頭函數(shù)避免了 setTimeout 中 this 指向的問(wèn)題。
4.在回調(diào)函數(shù)中：
每一次執(zhí)行時(shí)首先要清除建議框里的內(nèi)容，不然上一次的結(jié)果還會(huì)存在建議框里！截取了結(jié)果中的前五個(gè)(如果把所有結(jié)果都展示出來(lái)感覺(jué)有點(diǎn)丑…百度官方是展示前四個(gè)搜索建議) 結(jié)果處理完畢后，執(zhí)行自執(zhí)行匿名函數(shù)，刪除創(chuàng)建的 script 標(biāo)簽;5.由于 li 是動(dòng)態(tài)創(chuàng)建的，點(diǎn)擊 li 標(biāo)簽或者點(diǎn)擊'搜索一下'跳轉(zhuǎn)百度進(jìn)行搜索時(shí)，利用事件冒泡原理，進(jìn)行事件委托。這里沒(méi)有考慮兼容性問(wèn)題：
e = e || window.event;target = e.target || e.srcElement;
6.除了點(diǎn)擊事件，鍵盤(pán)事件?回車(chē)鍵以及上下鍵都是進(jìn)行事件委托進(jìn)行注冊(cè)的。
最終能夠?qū)崿F(xiàn)鍵盤(pán)上下鍵鼠標(biāo)選擇，點(diǎn)擊“搜索一下”或回車(chē)鍵實(shí)現(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='更方便快捷搜索，從而達(dá)到事半功倍的效果' 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' value='' autofocus placeholder='關(guān)鍵詞'> <input type='button' value='搜索一下' 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; // 注冊(cè)輸入框鍵盤(pán)抬起事件 searchInput.onkeyup = function (e) { suggestContainer.style.display = 'block'; // 如果輸入框內(nèi)容為空 清除內(nèi)容且無(wú)需跨域請(qǐng)求 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標(biāo)簽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; // 截取前五個(gè)搜索建議項(xiàng) if (result.length > 4) { result = result.slice(0, 5) } for (let i = 0; i < result.length; i++) { // 動(dòng)態(tài)創(chuàng)建li標(biāo)簽 var liObj = document.createElement('li'); liObj.innerHTML = result[i]; searchResult.appendChild(liObj); } // 自執(zhí)行匿名函數(shù)--刪除用于跨域的script標(biāo)簽 (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)}`); } // 事件委托 點(diǎn)擊li標(biāo)簽或者點(diǎn)擊搜索按鈕跳轉(zhuǎn)到百度搜索頁(yè)面 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)聽(tīng)鍵盤(pán)事件 bgDiv.addEventListener('keydown', function (e) { var size = searchResult.childNodes.length; if (e.keyCode === 13) { jumpPage(); }; // 鍵盤(pán)向下事件 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; } }; // 鍵盤(pán)向上事件 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); // 點(diǎn)擊頁(yè)面任何其他地方 搜索結(jié)果框消失 document.onclick = () => clearContent() </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備