JavaScriptでの入力検索フォームにイベントリスナーを追加する方法

入力検索フォームにイベントリスナーを追加すると、ユーザーがテキストを入力するたびに、特定の処理を実行することができます。以下に、シンプルで簡単な方法とコード例をいくつか紹介します。

まず、HTMLの入力検索フォーム要素にid属性を追加しましょう。例えば、以下のような形式です:

<input type="text" id="searchInput" />

次に、JavaScriptコードでイベントリスナーを追加します。以下の例では、入力イベントが発生した時に、入力されたテキストを取得し、コンソールに出力する方法を示しています。

const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function(event) {
  const searchText = event.target.value;
  console.log('入力されたテキスト:', searchText);
});

このコードを使用すると、ユーザーが入力するたびに、コンソールに入力されたテキストが表示されます。

さらに、このイベントリスナーを使用して、検索結果をリアルタイムに表示するなど、さまざまな処理を行うことができます。

以上が、JavaScriptで入力検索フォームにイベントリスナーを追加する方法の基本的な解説です。この方法を応用して、さまざまな機能を実装することができます。