JavaScript を使用してリアルタイム検索を実装し、結果を強調表示する方法は?-jsチュートリアル-php.cn

JavaScript を使用してリアルタイム検索を実装し、結果を強調表示する方法は?

PHPz

リリース： 2023-10-19 08:49:59

オリジナル

1502 人が閲覧しました

如何使用 JavaScript 实现实时搜索并高亮显示结果的功能？

JavaScript を使用してリアルタイム検索を実装し、結果を強調表示する方法は?

インターネットとビッグデータの急速な発展に伴い、検索機能は多くの Web サイトやアプリケーションに不可欠な部分になりました。従来の検索機能では、ユーザーがキーワードを入力して検索ボタンをクリックし、ページをリロードして検索結果を表示するという方法が多かったです。ただし、この方法のユーザーエクスペリエンスは比較的悪く、ユーザーは結果を確認するためにページがリロードされるまで待つ必要があります。ユーザーエクスペリエンスを向上させるために、リアルタイム検索機能が登場しました。

リアルタイム検索機能とは、ユーザーがキーワードを入力すると、ページを更新することなく検索結果がすぐに表示され、ユーザーが必要な情報を見つけやすくするために検索結果を強調表示することもできます。以下では、JavaScript を使用してこの機能を実装する方法と、対応するコード例を紹介します。

まず、フロントエンド表示インターフェイスとして HTML ページが必要です。ページには、検索ボックスと検索結果を表示する領域が必要です。検索ボックスが input タグ、検索結果を表示する領域が div タグで、その ID がそれぞれ「searchInput」と「searchResults」であると仮定します。コードは次のとおりです。

<input type="text" id="searchInput" placeholder="输入关键字">
<div id="searchResults"></div>

ログイン後にコピー

次に、JavaScript を使用して検索ボックスの入力イベントをリッスンし、入力されたキーワードを検索用に処理します。 input イベントを使用して入力ボックスの入力イベントを監視することで、リアルタイム検索機能を実装できます。コードは次のとおりです。

var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
  var keyword = searchInput.value.trim(); // 获取输入的关键字并去除首尾空格

  // 调用搜索函数，传入关键字，并将搜索结果显示在页面上
  showSearchResults(keyword);
});

ログイン後にコピー

次に、入力されたキーワードを処理し、対応する検索結果を返す検索関数が必要です。この検索機能では、Ajax リクエストを使用してバックエンドにリクエストを送信し、検索結果を取得できます。簡単にするために、検索関数が非同期関数であり、検索結果を含む配列を返すものと仮定して、検索関数をシミュレートします。コードは次のようになります。

function search(keyword, callback) {
  // 模拟异步请求，实际中可能向后端发送请求并获取搜索结果
  setTimeout(function() {
    var results = [
      'JavaScript',
      'HTML',
      'CSS',
      'Ajax',
      'jQuery'
    ];

    // 调用回调函数，将搜索结果传递给回调函数
    callback(results);
  }, 500); // 设置一个延迟来模拟请求的耗时
}

ログイン後にコピー

最後に、ページに検索結果を表示する関数が必要です。この関数は、検索結果を含む配列をパラメータとして受け取り、結果を強調表示して検索結果領域に表示します。コードは次のとおりです。

function showSearchResults(keyword) {
  search(keyword, function(results) {
    var html = '';

    for (var i = 0; i < results.length; i++) {
      // 使用关键字高亮显示搜索结果
      var highlighted = results[i].replace(keyword, '<span class="highlight">' + keyword + '</span>');
      html += '<p>' + highlighted + '</p>';
    }

    searchResults.innerHTML = html; // 将搜索结果显示在页面上
  });
}

ログイン後にコピー

上記のコードでは、クラス名「highlight」を含むspanタグを使用して、検索結果内のキーワードを強調表示します。 CSS スタイルを通じて、このクラス名の要素に強調表示効果を追加できます。

要約すると、入力ボックスの入力イベントを監視することでリアルタイム検索機能を実装しました。ユーザーがキーワードを入力すると、検索機能が呼び出され、検索結果がページ上で強調表示されて表示されます。このようにして、ユーザーは検索結果を即座に確認できるため、ユーザーエクスペリエンスが向上します。

参考元: