JSはBaiduの検索ボックスを実現します。
本論文の例では、JSがBaiduの検索ボックスを実現するための具体的なコードを共有しています。
原理を実現する
入力ボックスに動的にキーワードを入力すると、現在のキーワードを疑問符パラメータの後の値とします。ドメインをまたいで百度のインターフェースを使用するため、JSONPを通じてドメインをまたいでAjax要求を作成します。コールバック関数処理は、戻り値を返します。
Baiduのインターフェースを研究してみましたが、元のXHRインターフェースのパラメータはちょっと複雑です。
2345ナビゲーションを探していますが、入力ボックスに文字sを適当に入力して、Networkを開いて、Baiduのアドレスに要求を送りました。その中の疑問符の後の「&wd=s」はこのキーワードです。「&cb=」はコールバック処理関数であるべきです。Typeもscriptで、2345ナビゲーションもJSONPを通じてBaiduのデータを取得するべきです。
後は動的にliタグを作成し、内容を設定し、他の詳細に注意する必要があります。
1.flexレイアウトを使用して、検索ボックスの水平垂直方向の中央揃えを実現します。
flex属性を設定した後、水平に垂直に真ん中に置かれていないことが分かりました。当時父の箱heightを100%設置していましたが、heightを具体的な値に設定すれば、中に入れることができます。高さ%を設定していた疑いがありますが、高さの割合は父のケースに対して、つまりbodyです。黙認)とbodyはheightが設定されていません。また、レイアウトには幅の広い箱が設置されていません。幅はデフォルトで100%です。高さは中身から自然に開けられます。
2.一般的なDOMノードを先に取得し、後続の頻繁なクエリ操作DOMを避ける。
3.入力中に要求を頻繁に送信することを避けるために(タイピング速度が速いなら)、要求関数に対して関数節流を行いました。130 msぐらいの間隔を調整したらちょうどいいです。時間がもっと長くなれば、カートンの感覚があります。ES 6中の矢印関数を使用して、setTimeoutにおけるthis指向の問題を回避した。
4.コールバック関数で:実行するたびに、まず提案ボックスの内容をクリアします。そうでないと、前回の結果にはまだ提案ボックスがあります。結果の上位5つを切り取りました。(すべての結果を見せたらちょっと醜く感じます。Baiduの公式は上位4つの検索提案を展示しています。) 結果の処理が完了したら、作成したスクリプトタグを実行して削除します。 5.liは動的に作成されたので、liタグをクリックするか、または「検索」をクリックしてBaiduにジャンプして検索する場合、事件の泡立ち原理を利用して、イベント依頼を行う。ここでは互換性を考慮していません。
最終的にはキーボードの上下ボタンのマウス選択を実現し、「検索」または「バック」をクリックしてジャンプ検索を実現します。
コード:
原理を実現する
入力ボックスに動的にキーワードを入力すると、現在のキーワードを疑問符パラメータの後の値とします。ドメインをまたいで百度のインターフェースを使用するため、JSONPを通じてドメインをまたいでAjax要求を作成します。コールバック関数処理は、戻り値を返します。
Baiduのインターフェースを研究してみましたが、元のXHRインターフェースのパラメータはちょっと複雑です。
2345ナビゲーションを探していますが、入力ボックスに文字sを適当に入力して、Networkを開いて、Baiduのアドレスに要求を送りました。その中の疑問符の後の「&wd=s」はこのキーワードです。「&cb=」はコールバック処理関数であるべきです。Typeもscriptで、2345ナビゲーションもJSONPを通じてBaiduのデータを取得するべきです。
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です。黙認)とbodyはheightが設定されていません。また、レイアウトには幅の広い箱が設置されていません。幅はデフォルトで100%です。高さは中身から自然に開けられます。
2.一般的なDOMノードを先に取得し、後続の頻繁なクエリ操作DOMを避ける。
3.入力中に要求を頻繁に送信することを避けるために(タイピング速度が速いなら)、要求関数に対して関数節流を行いました。130 msぐらいの間隔を調整したらちょうどいいです。時間がもっと長くなれば、カートンの感覚があります。ES 6中の矢印関数を使用して、setTimeoutにおけるthis指向の問題を回避した。
4.コールバック関数で:
e = e || window.event;
target = e.target || e.srcElement;
6.イベントをクリックする以外に、キーボードイベントCコールキーと上下キーはイベント依頼で登録します。最終的にはキーボードの上下ボタンのマウス選択を実現し、「検索」または「バック」をクリックしてジャンプ検索を実現します。
コード:
<!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=" ">
<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.createElement("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 = 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>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。