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インデックスが失敗するいくつかの状況の詳細な分析

1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...

MySQLに絵文字表現を保存する詳細な手順

原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

SQLシリアル番号取得コード例

この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...

MySQL フルテキスト検索の中国語ソリューションとサンプルコード

MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...

MySQLキーワードDistinctの詳細な紹介

MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード

1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...

レスポンシブレイアウトの概要(推奨)

レスポンシブレイアウト開発の基礎知識この章は主に以下の部分に分かれています• レスポンシブデザインを...

JavaScript のマイクロタスクとマクロタスクの説明

序文: js はシングルスレッド言語なので、非同期にすることは不可能です。しかし、js のホスト環境...

DockerコンテナがSongtiなどのフォントを認識しない場合の解決策

問題の背景: docker を使用してプロジェクトをデプロイする場合、プロジェクト内で印刷コントロー...

DockerにFastDFSをインストールする方法

画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...