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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS は Baidu 検索ボックスのキーワード推奨を実装します
  • Baidu 検索ボックス効果を実装する JavaScript
  • Vue.js 2.0 をベースに Baidu 検索ボックス効果を実装する
  • Baidu スマート検索ボックスを実装するための JS+Ajax
  • JavaScript ベースの Baidu 検索ボックス効果の実装
  • Vue.js を使用して Baidu 検索ボックスを模倣するサンプル コード
  • Baidu 検索ボックス スマート プロンプト ケース jsonp
  • jsonp を使用してドメイン間で Baidu js を呼び出し、検索ボックスにインテリジェントなプロンプトを実装する
  • JSは、GoogleやBaiduと同様に、検索ボックスに情報を入力するためのインテリジェントなプロンプトを実装します。

<<:  Apache Webサーバーのインストールと設定方法

>>:  MySQL で日付時刻データを取得し、その後に .0 を追加する方法

推薦する

MySQL グリーンバージョン設定コードと 1067 エラーの詳細

MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 &#...

MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード

序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

Vuex はシンプルなショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

Baota Linux パネル コマンド リスト

目次Pagodaをインストールする管理塔Nginx サービス管理Apache サービス管理MySQL...

ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Docker はすべてのコンテナをバッチ起動して閉じます

Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。

1. 使用バージョンバイト:2.0 ant-design-vue: 2.0.0-rc.8ヴュー:3...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

WeChatアプレット開発で遭遇したことのない落とし穴のまとめ

目次getApp()ページエントリファイルの先頭に変数を定義しますwx.createSelector...

MySQL水平および垂直テーブル変換操作の実装方法

この記事では、例を使用して、MySQL の水平テーブルと垂直テーブル間の変換操作を実装する方法を説明...