この記事の例では、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. 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Apache Webサーバーのインストールと設定方法
>>: MySQL で日付時刻データを取得し、その後に .0 を追加する方法
1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...
原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...
この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...
MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...
MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...
ユニアプリコード <テンプレート> <表示> <image v-for...
1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...
レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...
序文: js はシングルスレッド言語なので、非同期にすることは不可能です。しかし、js のホスト環境...
問題の背景: docker を使用してプロジェクトをデプロイする場合、プロジェクト内で印刷コントロー...
画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...