絞り込み検索のUIでは、ユーザーが「いま何で絞り込んでいるか」を画面に表示するととても分かりやすくなります。この記事では、現在の検索条件をリアルタイムに表示する方法を、単一キーワードから複数条件・削除できるタグ表示・URL連携まで解説します。
基本は「入力値を読み取り、textContent で表示エリアに反映する」だけです。更新のタイミングと、複数条件のまとめ方がポイントになります。
submit ではなく input イベントで行うとリアルタイム表示になります。表示はtextContent（XSS安全）を使います。複数条件は配列にまとめて結合、URLからの復元は URLSearchParams で行います。入力値を取得して表示する（基本）
まずは単一のキーワードを表示する基本形です。submit イベントだとボタンを押すまで更新されないため、入力のたびに反映したいなら input イベントを使います。
<input type="text" id="query" placeholder="キーワードを入力"> <p>現在の検索条件：<span id="current"></span></p>
const query = document.getElementById("query");
const current = document.getElementById("current");
query.addEventListener("input", () => {
current.textContent = query.value || "（条件なし）";
});
textContent を使います。innerHTML だと <script> などが実行されるXSSの危険があります。使い分けはtextContent・innerHTMLの使い分けを参照してください。複数の検索条件をまとめて表示する
実際の検索では、キーワードに加えてカテゴリやチェックボックスなど複数の条件があります。各入力値を集めて、設定されている条件だけを表示します。
<form id="searchForm">
<input type="text" id="keyword" placeholder="キーワード">
<select id="category">
<option value="">すべてのカテゴリ</option>
<option value="book">書籍</option>
<option value="dvd">DVD</option>
</select>
<label><input type="checkbox" id="inStock"> 在庫ありのみ</label>
</form>
<p>現在の検索条件：<span id="summary"></span></p>
const form = document.getElementById("searchForm");
const summary = document.getElementById("summary");
function updateSummary() {
const conditions = [];
const keyword = document.getElementById("keyword").value.trim();
const category = document.getElementById("category");
const inStock = document.getElementById("inStock").checked;
if (keyword) conditions.push(`キーワード: ${keyword}`);
if (category.value) {
// 選択肢の表示テキストを使う
conditions.push(`カテゴリ: ${category.options[category.selectedIndex].text}`);
}
if (inStock) conditions.push("在庫あり");
summary.textContent = conditions.length ? conditions.join(" / ") : "（条件なし）";
}
// テキスト入力・選択・チェックの変化をまとめて拾う
form.addEventListener("input", updateSummary);
form.addEventListener("change", updateSummary);
updateSummary(); // 初期表示
フォーム要素に input と change の両方を張ると、テキスト入力もセレクトボックスやチェックボックスの変更も漏れなく拾えます。入力監視のより詳しい手法はフォーム入力をリアルタイムで監視する方法で解説しています。
削除できる条件タグ（チップ）で表示する
条件を削除ボタン付きのタグ（チップ）で表示すると、個別に外せて使いやすくなります。createElement と textContent で安全に組み立てます。
const chipBox = document.getElementById("chips");
function renderChips(conditions) {
chipBox.textContent = ""; // 一旦クリア
conditions.forEach(({ key, label }) => {
const chip = document.createElement("span");
chip.className = "chip";
chip.textContent = label + " ";
const remove = document.createElement("button");
remove.type = "button";
remove.textContent = "×";
remove.addEventListener("click", () => clearCondition(key)); // 条件を解除
chip.appendChild(remove);
chipBox.appendChild(chip);
});
}
// 例: renderChips([{ key: "keyword", label: "キーワード: JS" }])
チップの見た目（背景色や角丸）は .chip のCSSで整えます。クラスの付け外しはclassListの使い方が参考になります。
URLの検索条件から復元する（URLSearchParams）
検索条件を ?keyword=JS&category=book のようにURLへ持たせると、ブックマークや共有で同じ検索を再現できます。ページ読み込み時に URLSearchParams で読み取り、フォームと表示に反映します。
// 例: /search?keyword=JS&category=book
const params = new URLSearchParams(location.search);
const keyword = params.get("keyword") || "";
const category = params.get("category") || "";
// フォームに反映
document.getElementById("keyword").value = keyword;
document.getElementById("category").value = category;
updateSummary(); // 復元した条件を表示
URLパラメータの取得方法の詳細はURLのパラメータを取得する方法にまとめています。逆に、絞り込み後に history.pushState でURLを更新すれば、戻る・進むにも対応できます。
よくある質問（FAQ）
submit ではなく input イベントを使います。submit はボタンを押すまで更新されませんが、input なら入力のたびに反映されます。セレクトボックスやチェックボックスは change イベントも併用すると確実です。textContent で表示すれば安全です。innerHTML を使うと、入力に含まれる <script> などが実行されるXSSの危険があります。ユーザー入力の表示には textContent を使ってください。join(" / ") で連結します。何も設定されていなければ「（条件なし）」と表示すると親切です。new URLSearchParams(location.search) で読み取り、params.get("keyword") のように各値を取得してフォームと表示に反映します。これでブックマークや共有URLから同じ検索条件を再現できます。まとめ
現在の検索条件の表示は、入力値を読み取って textContent で反映するのが基本です。更新は input（＋change）イベントで行うとリアルタイムになります。
複数条件は配列にまとめて連結し、削除できるタグ（チップ）表示にするとさらに使いやすくなります。URLSearchParams でURLと連携すれば、共有やブックマークから検索条件を復元できます。表示には必ず textContent を使い、XSSを防ぎましょう。
