JavaScriptを使って、ユーザーが入力した検索条件をリアルタイムで表示する方法を紹介します。これにより、ユーザーは現在の検索条件を確認しながら検索結果を調整することができます。
検索フォームのHTMLを作成する
まずは、検索ボックスと検索条件を表示するエリアを含むシンプルなフォームを作成しましょう。以下のコードを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>検索条件の表示</title>
</head>
<body>
<form id="searchForm">
<label for="query">検索:</label>
<input type="text" id="query" name="query">
<button type="submit">検索</button>
</form>
<div id="searchConditions">
現在の検索条件: <span id="currentQuery"></span>
</div>
<script src="script.js"></script>
</body>
</html>このHTMLコードには、検索ボックスと検索条件を表示するためのエリアが含まれています。formタグの中に検索ボックスとボタンを配置し、検索条件表示用のdivを用意しています。
JavaScriptで検索条件を表示する
次に、フォームの送信イベントをキャッチし、検索ボックスの値を取得して表示するJavaScriptコードを作成します。以下のコードをscript.jsというファイルに保存してください。
document.addEventListener('DOMContentLoaded', () => {
const searchForm = document.getElementById('searchForm');
const currentQuery = document.getElementById('currentQuery');
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
const query = document.getElementById('query').value;
currentQuery.textContent = query;
});
});このJavaScriptコードでは、フォームの送信イベントを監視し、検索ボックスの値を取得して検索条件表示エリアに設定しています。
実際の動作を確認する
ここまでの手順を完了すると、ユーザーが検索ボックスに入力して「検索」ボタンをクリックした際に、現在の検索条件がリアルタイムで表示されるようになります。
まとめ
今回の記事では、JavaScriptを使って現在の検索条件を表示する方法を紹介しました。この方法を応用すれば、さらに複雑な検索条件やフィルターを追加することも可能です。ぜひ、皆さんのプロジェクトに活用してみてください。
