JS實現百度搜索框
阿新 • • 發佈：2021-02-27
本文例項為大家分享了js實現百度搜索框的具體程式碼，供大家參考，具體內容如下
實現原理
向輸入框動態輸入時關鍵詞，將當前關鍵詞作為問號引數後面的值，因為要跨域使用百度的介面，所以通過 JSONP 跨域建立 Ajax 請求。回撥函式處理返回值。
嘗試研究了一下百度的介面，發現原生的 XHR 介面引數有點複雜(百度應該是考慮了很多情況)。
找了一個 2345 導航，在輸入框隨便輸入一個字母 s，開啟 Network,發現它也是向百度的一個地址傳送了請求，其中問號後面的‘&wd=s'傳送的就是此關鍵詞，'&cb='應該就是回撥處理函式，並且它的 Type 也是 script，2345 導航應該也是通過 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);
點開那條請求，果然在裡面看到了返回的資料。返回的結果是以一個物件的形式返回的。q 對應著檢索關鍵詞，s 對應著返回的結果(陣列形式)
後續只需要動態建立 li 標籤，設定裡面的內容，以及注意其他細節問題。
1.使用 flex 佈局實現搜尋框的水平垂直居中。
坑 設定完 flex 屬性之後發現並沒有水平垂直居中，當時設定了父盒子 height:100%,發現如果將 height 設定成具體值就可以實現居中。懷疑是設定了%高度無效，查了一下，高度百分比是相對於父盒子的，也就是 body。預設 html 和 body 是沒有設定 height 的。另外，在佈局中對於沒有設定寬高的塊狀盒子，寬度預設是 100%的，高度是由裡面的內容自然撐開的。
2.先獲取常用的 DOM 節點，避免後續頻繁查詢操作 DOM。
3.為了避免在輸入過程中頻繁傳送請求(如果打字速度快),對請求函式做了函式節流，調了一下間隔 130ms 差不多正好，時間再長就會有卡頓的感覺。使用了 ES6 中的箭頭函式避免了 setTimeout 中 this 指向的問題。
4.在回撥函式中：
- 每一次執行時首先要清除建議框裡的內容，不然上一次的結果還會存在建議框裡！截取了結果中的前五個(如果把所有結果都展示出來感覺有點醜…百度官方是展示前四個搜尋建議)
- 結果處理完畢後，執行自執行匿名函式，刪除建立的 script 標籤;
5.由於 li 是動態建立的，點選 li 標籤或者點選"搜尋一下"跳轉百度進行搜尋時，利用事件冒泡原理，進行事件委託。這裡沒有考慮相容性問題：
e = e || window.event; target = e.target || e.srcElement;
6.除了點選事件，鍵盤事件–回車鍵以及上下鍵都是進行事件委託進行註冊的。
最終能夠實現鍵盤上下鍵滑鼠選擇，點選“搜尋一下”或回車鍵實現跳轉搜尋。
程式碼：
<!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-heighwww.cppcns.comt: 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="關鍵詞">
<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");
// 清除建議框內容
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";
// 如果輸入框內容為空 清除內容且無需跨域請求
if (this.value.length === 0) {
clearContent();
return;
}
if (this.timer) {
clearTimeout(this.timer);
}
if (e.keyCode !== 40 && e.keyCode !== 38) {
// 函式節流優化
this.timer = setTimeout(() => {
// 建立script標籤JSONP程式設計客棧跨域
var script = document.createElemenwww.cppcns.comt("script");
script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
"&p=3&cb=handleSuggestion";
document.body.appendChild(script);
},130)
}
};
// 回撥函式處理返回值
function handleSuggestion(res) {
// 清空之前的資料！！
clearContent();
var result = res.s;
// 擷取前五個搜尋建議項
if (result.length > 4) {
result = result.slice(0,5)
}
for (let i = 0; i < result.length; i++) {
// 動態建立li標籤
var liObj = document.createElement("li");
liObj.innerHTML = result[i];
searchResult.appendChild(liObj);
}
// 自執行匿名函式--刪除用於跨域的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標籤或者點選搜尋按鈕跳轉到百度搜索頁面
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;
// 事件委託 監聽鍵盤事件
bgDiv.addEventListener("keydown",function (e) {
var size http://www.cppcns.com= 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);
// 點選頁面任何其他地方 搜尋結果框消失
document.onclick = () => clearContent()
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。