即時フィルタ
検索ボックスに入力するとリストが即座に絞り込まれる。ページ遷移なしでさくさく探せる。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 数十件の一覧から名前で即座に探す
- 都道府県・タグなど短い語の一覧
- ページ遷移なしで絞り込みたい選択肢
- 避ける場面
- 件数が多くサーバー検索が要る一覧
- 複数条件の組み合わせが要る絞り込み
- 一致語のハイライトが意味を持たない数値列
- 構成要素
- 検索欄
- 検索アイコン
- 一覧
- 一致ハイライト
- 0件メッセージ
- 持っている状態
- 通常
- ホバー
- フォーカス
- 空
- キーボード
Tab で検索欄へ移動し文字入力で即時絞り込み。一覧の項目はフォーカス不可（表示のみ）
- 支援技術
input に aria-label、一致箇所は mark 要素、0件は「一致する項目がありません」の文言で示し色に依存しない。件数の変化は sr-only の role=status で「N件」を告知
- 動き
枠線色 0.2s・行背景 0.15s。絞り込み自体は即時（動きなし）。reduced-motion で transition 停止
原則ドハティの閾値
デザインの要点
- 絞り込みは input イベントごとに即時。ボタンを押させると「押す前の一覧」と「押した後」の2状態を頭に置かせることになる
- 一致箇所は mark で組み立て、innerHTML に文字列を流し込まない。入力値がそのまま HTML になる経路を作らない
- 0件は空白ではなく文言で示す。何も出ないと「壊れた」と「無かった」の区別がつかない
- 件数の変化は sr-only の role=status で告知する。目で見えている行の増減は、読み上げでは何も起きていないのと同じ
コード（コピーして使えます）
<div class="filter-wrap">
<div class="filter-search">
<span class="filter-icon" aria-hidden="true">🔍</span>
<input class="filter-input" type="text" placeholder="キーワードで絞り込む" aria-label="キーワードで絞り込む" autocomplete="off">
</div>
<p class="filter-status" id="filter-status" role="status" aria-live="polite"></p>
<ul class="filter-list">
<li>東京都</li>
<li>大阪府</li>
<li>神奈川県</li>
<li>愛知県</li>
<li>埼玉県</li>
<li>千葉県</li>
<li>福岡県</li>
<li>北海道</li>
</ul>
<p class="filter-empty" hidden>一致する項目がありません</p>
</div>