JavaScript で Baidu 検索を実装-フロントエンドQ&A-php.cn

JavaScript で Baidu 検索を実装

王林

リリース： 2023-05-26 20:16:06

オリジナル

1670 人が閲覧しました

JavaScript は、Web 開発で広く使用されている高レベルのインタープリタ型プログラミング言語です。その中でも、JavaScript を使用すると、Web ページに動的な効果、対話性、論理的な機能を持たせることができます。 Web サイトの共通機能の 1 つである Baidu 検索ですが、この記事では JavaScript を使用して Baidu 検索を実装する方法を紹介します。

HTML 構造

まず、HTML ファイル内に検索ボックスや送信ボタンなどのコンポーネントを作成する必要があります。ここでは、Baidu のホームページの検索ボックスを例に挙げます。

<form id="search-form" action="http://www.baidu.com/s" target="_blank">
  <input type="text" id="search-input" name="wd" autocomplete="off" placeholder="请输入关键字">
  <button type="submit" id="search-button">搜索</button>
</form>

ログイン後にコピー

コードでは、form はフォームコンポーネントを表し、action 属性は送信されたアドレスを指定します。 (ここは Baidu の検索アドレスです)、target は、検索結果を新しいウィンドウで開くことを指定します。テキストボックスの id は search-input、ボタンの id は search-button です。これら 2 つの ID は次のとおりです。背後の JavaScript コードではで使用されます。

検索機能を実装するための JavaScript

次に、検索機能を実装するためのコードを JavaScript で記述する必要があります。 script タグに次のコードを追加します。

var form = document.getElementById('search-form');
var input = document.getElementById('search-input');

form.onsubmit = function(e) {
  e.preventDefault();
  var query = input.value;
  window.location.href = 'http://www.baidu.com/s?wd=' + encodeURIComponent(query);
};

ログイン後にコピー

まず、document.getElementById メソッドを通じて検索ボックスとフォームコンポーネントを取得します。次に、フォームコンポーネントの onsubmit イベントにコールバック関数を追加して、フォームのデフォルトの送信動作を防止します。コールバック関数で、検索ボックスのテキスト値を取得し、window.location.href 属性を使用してリダイレクトし、クエリ文字列を Baidu 検索アドレスに結合します。

クエリ文字列には特殊文字が含まれている可能性があるため、encodeURIComponent メソッドを使用してエンコードし、URL で渡されるパラメータが標準に準拠していることを確認する必要があることに注意してください。

UI の美化

検索機能をより美しく、使いやすくするために、CSS スタイルを通じて検索ボックスとボタンを美化できます。次のコードを追加できます:

#search-form {
  display: inline-block;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ccc;
  font-size: 14px;
}

#search-input {
  width: 300px;
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
}

#search-button {
  width: 80px;
  height: 40px;
  margin-left: 5px;
  background-color: #3385ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

#search-button:hover {
  background-color: #2366d1;
}

ログイン後にコピー

コードでは、背景色、境界線、丸い角、影、フォントサイズなどの属性を含む、検索ボックスとボタンのスタイルをそれぞれ追加します。さらに、マウスオーバーでボタンの色が変わり、インタラクティブ性が追加されます。

自動補完の実現

基本的な検索機能に加え、JavaScriptによるクエリキーワードの自動補完も実装できます。ユーザーが文字を入力すると、入力した内容に基づいて一致する検索キーワードが表示されます。

サードパーティライブラリ jquery-ui を利用することで入力自動補完機能を実現できます。コードのメンテナンスも容易になります。

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <!--...-->
  <script>
    $(function() {
      $("#search-input").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://www.baidu.com/sugrec",
            dataType: "jsonp",
            data: {
              wd: request.term
            },
            success: function(data) {
              var results = [];
              if (data.g && data.g.length) {
                $.each(data.g, function(i, val) {
                  results.push({
                    label: val.q,
                    value: val.q
                  });
                });
              }
              response(results);
            }
          });
        },
        minLength: 1,
        delay: 150
      });
    });
  </script>
</body>

ログイン後にコピー

Baidu が提供するインターフェースを借用してキーワードを入力しました。入力入力ボックスのidはjqueryUIフレームワークのオートコンプリート機能を利用してキーワードの関連付けを実装していることが分かります。このうち、source はインターフェイスアドレスを設定し、dataType は応答データ型を設定し、data はリクエストパラメータを設定します。返されたデータ処理メソッドは success に保存され、キーワードがフィルター処理されて results 配列に設定され、最後に response に返されます。 minLengthプロンプト単語をクエリするために必要な最小文字数を設定します。delayクエリ要求の遅延時間を設定します。

概要

この記事では、Baidu 検索を例として、JavaScript を使用して基本的な検索機能とオートコンプリート機能を実装する方法を紹介します。もちろん、これは単なる実装であり、Baidu 検索には上記 2 つの機能以外にも、人気のあるレコメンデーション、関連検索、および実際には継続的な学習と改善が必要なその他の機能も実装されています。同時に、他のフロントエンド技術やフレームワークを組み合わせることで、より強力な検索機能を実現できます。

以上がJavaScript で Baidu 検索を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。