JavaScriptを使用してテキスト入力ボックスにリアルタイム検索機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用してテキスト入力ボックスにリアルタイム検索機能を実装するにはどうすればよいですか?

PHPz

リリース： 2023-10-24 11:33:45

オリジナル

1220 人が閲覧しました

如何使用 JavaScript 实现文本输入框实时搜索功能？

JavaScript を使用してテキスト入力ボックスにリアルタイム検索機能を実装するにはどうすればよいですか?

インターネットの発展に伴い、検索機能は Web デザインに不可欠な部分になりました。テキスト入力ボックスのリアルタイム検索は、ユーザーの入力時に関連する結果を迅速に提供する使いやすい方法であり、ユーザーエクスペリエンスが向上します。この記事では、JavaScript を使用してテキスト入力ボックスのリアルタイム検索機能を実装する方法と具体的なコード例を紹介します。

まず、HTML ファイルにテキスト入力ボックスと検索結果を表示するコンテナを追加します。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>实时搜索</title>
</head>
<body>
  <input type="text" id="search-input" placeholder="请输入关键字">
  <div id="search-results"></div>

<script src="script.js"></script>
</body>
</html>

ログイン後にコピー

次に、JavaScript ファイルにリアルタイム検索機能を実装します。コードは次のとおりです。

// 获取文本输入框和搜索结果容器
var input = document.getElementById('search-input');
var resultsContainer = document.getElementById('search-results');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  // 清空搜索结果容器
  resultsContainer.innerHTML = '';

  // 获取输入框的值
  var query = input.value;

  // 进行搜索
  var results = search(query);

  // 展示搜索结果
  showResults(results);
});

function search(query) {
  // 这里可以使用 AJAX 请求后端接口，获取相关搜索结果
  // 在示例中，我们使用一个简单的字符串匹配方式来模拟搜索结果
  var data = ['JavaScript', 'Java', 'Python', 'HTML', 'CSS'];
  var results = [];

  for (var i = 0; i < data.length; i++) {
    if (data[i].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
      results.push(data[i]);
    }
  }

  return results;
}

function showResults(results) {
  // 遍历搜索结果，并在搜索结果容器中展示
  for (var i = 0; i < results.length; i++) {
    var result = document.createElement('div');
    result.textContent = results[i];
    resultsContainer.appendChild(result);
  }
}

ログイン後にコピー

コード分析:

まず、getElementById メソッドを通じて、テキスト入力ボックスと検索結果コンテナへの参照を取得します。
次に、addEventListener メソッドを使用して、入力ボックスの input イベントをリッスンします。これは、入力内容が変更されたときのイベントです。
イベント処理関数では、まず検索結果コンテナをクリアし、次に input.value を通じて入力ボックスの値を取得し、search 関数を呼び出します。検索。
search この関数は、単純なシミュレートされた検索インターフェイスであり、固定データを格納する配列を走査し、入力ボックスの値に従って照合し、一致結果の配列を返します。
最後に、showResults 関数は検索結果配列を走査し、検索結果コンテナーに検索結果を動的に作成して表示します。

上記のコードにより、テキスト入力ボックスに簡単なリアルタイム検索機能を実装しました。ユーザーが入力ボックスにコンテンツを入力すると、ページに関連する検索結果がすぐに表示されます。 AJAX を使用してバックエンドインターフェイスに実際のデータを取得するように要求したり、より複雑な検索アルゴリズムを実装したりするなど、実際のニーズに応じて検索ロジックを最適化およびカスタマイズできます。

概要:
この記事では、JavaScript を使用してテキスト入力ボックスのリアルタイム検索機能を実装する方法と、具体的なコード例を紹介します。このリアルタイム検索機能により、ユーザーエクスペリエンスが向上し、ユーザーがコンテンツを入力する際に関連する検索結果を迅速に取得できるようになります。この記事が、Web ページの検索機能を開発する際の参考になれば幸いです。

以上がJavaScriptを使用してテキスト入力ボックスにリアルタイム検索機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。