JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実施原則

入力ボックスにキーワードを動的に入力する場合、疑問符パラメータの後の値は現在のキーワードとして使用されます。Baidu のインターフェースはドメイン間で使用されるため、JSONP を介してドメイン間で Ajax リクエストが作成されます。コールバック関数は戻り値を処理します。

Baidu のインターフェースを調べてみましたが、ネイティブ XHR インターフェースパラメータが少し複雑であることがわかりました (Baidu は多くの状況を考慮すべきでした)。

2345ナビゲーションを見つけ、入力ボックスにランダムに文字sを入力し、ネットワークを開くと、Baiduのアドレスにもリクエストが送信されていることがわかりました。疑問符の後の「&wd=s」はこのキーワードを送信し、「&cb=」はコールバック処理関数であるはずで、そのタイプもスクリプトです。2345ナビゲーションは、JSONPを介してBaiduからデータを取得するはずです。

var スクリプト = document.createElement("スクリプト");
スクリプト.src =
 「https://www.baidu.com/su?&wd=" +
 encodeURI(this.value.trim()) +
 "&p=3&cb=ハンドル提案";
document.body.appendChild(スクリプト);

そのリクエストをクリックして、返されたデータを確認しました。結果はオブジェクトの形式で返されます。 q は検索キーワードに対応し、s は返された結果（配列形式）に対応します。

後は、li タグを動的に作成し、内部のコンテンツを設定し、その他の詳細に注意を払うだけです。

1. フレックスレイアウトを使用して、検索ボックスを水平方向と垂直方向に中央揃えにします。

flex属性を設定したら、水平・垂直とも中央揃えになっていないことが分かりました。その時、親ボックスの高さを100%に設定し、高さを特定の値にすると中央揃えになる事が分かりました。 % 高さ設定が無効であるのではないかと疑いました。確認したところ、高さのパーセンテージは親ボックス、つまり本体に対する相対値であることがわかりました。デフォルトでは、html と body には高さが設定されていません。また、レイアウトにおいて、幅と高さが設定されていないブロックボックスの場合、幅はデフォルトで 100% に設定され、高さは内部のコンテンツによって自然に拡張されます。

2. DOM に対する頻繁なクエリや操作を回避するために、よく使用される DOM ノードを最初に取得します。

3. 入力処理中にリクエストが頻繁に送信されるのを避けるために（速く入力する場合）、リクエスト機能は調整され、間隔はちょうど良い130msに調整されます。時間が長くなると、ラグ感が生じます。 ES6 の矢印関数は、setTimeout での this ポイントの問題を回避するために使用されます。

4. コールバック関数内:

実行するたびに、まず提案ボックスの内容をクリアする必要があります。そうしないと、最後の結果が提案ボックスに残ったままになります。最初の 5 つの結果がキャプチャされます (すべての結果が表示されると少し見苦しくなります... Baidu は公式に最初の 4 つの検索候補を表示します)
結果が処理された後、自己実行型匿名関数が実行され、作成されたスクリプトタグが削除されます。

5. li は動的に作成されるため、li タグをクリックするか、「検索」をクリックして Baidu にジャンプして検索すると、イベントバブリング原理を使用してイベントが委任されます。ここでは互換性の問題は考慮されません。

e = e || ウィンドウイベント;
ターゲット = e.target || e.srcElement;

6. クリックイベントに加えて、キーボードイベント (Enter キー、上下キー) もすべてイベント委任に登録されます。

最後に、キーボードの上下キーとマウスを使用して選択し、「検索」をクリックするか、Enter キーを押して検索にジャンプします。

コード：

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

<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <!-- 互換表示 -->
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <meta content="より便利で高速な検索により、半分の労力で 2 倍の結果が得られます" name="description">
 <title>検索したい</title>
 <スタイル>
 html{
 高さ: 100%;
 }

 体 {
 背景: #f0f3ef;
 高さ: 100%;
 }

 。容器 {
 高さ: 100%;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 flex-direction: 列;
 }

 .bgDiv {
 ボックスのサイズ: 境界線ボックス;
 幅: 595ピクセル;
 高さ: 55px;
 位置: 相対的;
 /* 位置: 絶対;
 左: 50%;
 上位: 50%;
 変換: translate(-50%, -50%); */
 }

 .検索入力テキスト{
 境界線: 1px 実線 #b6b6b6;
 幅: 495ピクセル;
 背景: #fff;
 高さ: 33px;
 行の高さ: 33px;
 フォントサイズ: 18px;
 パディング: 3px 0 0 7px;
 }

 .検索入力ボタン{
 幅: 90ピクセル;
 高さ: 38px;
 色: #fff;
 フォントサイズ: 16px;
 文字間隔: 3px;
 背景: #3385ff;
 境界線: .5px 実線 #2d78f4;
 左マージン: -5px;
 垂直方向の位置合わせ: 上;
 不透明度: .9;
 }

 .検索入力ボタン:ホバー{
 不透明度: 1;
 ボックスの影: 0 1px 1px #333;
 カーソル: ポインタ;
 }

 。提案する {
 幅: 502ピクセル;
 位置: 絶対;
 上: 38px;
 境界線: 1px 実線 #999;
 背景: #fff;
 表示: なし;
 }

 .suggest ul {
 リストスタイル: なし;
 マージン: 0;
 パディング: 0;
 }

 .suggest ul li {
 パディング: 3px;
 フォントサイズ: 17px;
 行の高さ: 25px;
 カーソル: ポインタ;
 }

 .suggest ul li:hover {
 背景色: #e5e5e5
 }
 </スタイル>
</head>

<本文>
 <div class="コンテナ">
 <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="検索結果">
 </ul>
 </div>
 </div>
 </div>

 <スクリプト>
 var suggestContainer = document.getElementsByClassName("suggest")[0];
 var searchInput = document.getElementsByClassName("検索入力テキスト")[0];
 var bgDiv = document.getElementsByClassName("bgDiv")[0];
 var searchResult = document.getElementById("検索結果");

 // 提案ボックスの内容をクリアする function clearContent() {
 var size = searchResult.childNodes.length;
 (var i = size - 1; i >= 0; i--) {
 searchResult.childNodes[i] 内の子ノードを削除します。
 }
 };

 var タイマー = null;
 // 入力ボックスのキーボードリフトイベントを登録する searchInput.onkeyup = function (e) {
 suggestContainer.style.display = "ブロック";
 // 入力ボックスの内容が空の場合は、内容をクリアし、クロスドメインリクエストは必要ありません。if (this.value.length === 0) {
 コンテンツをクリアします。
 戻る;
 }
 if (this.timer) {
 タイムアウトをクリアします(this.timer);
 }
 (e.keyCode !== 40 && e.keyCode !== 38) の場合 {
 // 関数スロットリングの最適化 this.timer = setTimeout(() => {
 // スクリプト タグ JSONP クロスドメインを作成 var script = document.createElement("script");
 script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
 "&p=3&cb=ハンドル提案";
 document.body.appendChild(スクリプト);
 }, 130)
 }

 };

 // コールバック関数 handleSuggestion(res) {
 // 以前のデータをクリアします。 ！
 コンテンツをクリアします。
 var 結果 = res.s;
 // 最初の5つの検索候補をインターセプトします if (result.length > 4) {
 結果 = result.slice(0, 5)
 }
 (i = 0 とします; i < result.length; i++) {
 // li タグを動的に作成します var liObj = document.createElement("li");
 liObj.innerHTML = 結果[i];
 searchResult.appendChild(liObj);
 }
 // 自己実行型匿名関数 - クロスドメインで使用されるスクリプトタグを削除します (function () {
 var s = document.querySelectorAll('script');
 (var i = 1, len = s.length; i < len; i++) {
 document.body.removeChild(s[i]);
 }
 })()
 }


 関数jumpPage() {
 ウィンドウを開きます(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`);
 }

 // イベントデリゲートが li タグをクリックするか、検索ボタンをクリックして Baidu 検索ページにジャンプします bgDiv.addEventListener("click", function (e) {
 if (e.target.nodeName.toLowerCase() === 'li') {
 var キーワード = e.target.innerText;
 searchInput.value = キーワード;
 ジャンプページ();
 } そうでない場合 (e.target.id === 'btn') {
 ジャンプページ();
 }
 }、 間違い）;

 var i = 0;
 var フラグ = 1;

 // キーボードイベントをリッスンするためのイベント委任 bgDiv.addEventListener("keydown", function (e) {
 var size = searchResult.childNodes.length;
 (e.keyCode === 13)の場合{
 ジャンプページ();
 };
 //キーボード押下イベントif (e.keyCode === 40) {
 フラグが0の場合
 i = i + 2;
 }
 フラグ = 1;
 e.preventDefault();
 i >= サイズの場合{
 私 = 0;
 }
 i < サイズの場合
 searchInput.value = searchResult.childNodes[i++].innerText;
 }
 };
 //キーボードアップイベントif (e.keyCode === 38) {
 （フラグ === 1）の場合{
 i = i - 2;
 }
 フラグ = 0;
 e.preventDefault();
 もし（i < 0）{
 i = サイズ - 1;
 }
 もし (i > -1) {
 searchInput.value = searchResult.childNodes[i--].innerText;
 }
 };
 }、 間違い）;

 // ページ上の他の場所をクリックすると検索結果ボックスが消えます document.onclick = () => clearContent()
 </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: