即時検索＋一致ハイライト
入力のたびに記事一覧を絞り込み、一致した文字を <mark> で強調する。件数はライブで更新され、空白区切りの複数語は AND で効く。0件では言い換えを促す。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 記事・FAQ など数十〜数百件の一覧を打ちながら絞る画面
- 一致した理由を見せたい検索（<mark> で強調）
- 複数語の AND で絞る社内ドキュメント検索
- 避ける場面
- サーバー問い合わせが要る大量データ（毎打鍵で叩く）
- 一致箇所より並び順が重要なランキング表示
- 構成要素
- ラベル
- 検索入力欄
- クリアボタン
- 件数
- 結果リスト（一致強調）
- 0件メッセージ
- 持っている状態
- 通常
- ホバー
- フォーカス
- 空
- キーボード
Tab で入力欄→クリアボタン。文字を打つたびに即絞り込み。クリアは Enter／Space で消して入力欄へフォーカスを戻す
- 支援技術
label[for] で名前を結び、aria-describedby で件数を関連付ける。件数は aria-live=polite。クリアは aria-label 付き。一致は mark 要素で示す
- 動き
なし
原則ドハティの閾値
デザインの要点
- 一致箇所を強調すると「なぜこれが出たか」が説明され、利用者は結果を疑わずに済む
- 件数は「14件中 3件」と母数つきで出す。母数がないと絞り込めたのか減っただけか分からない
- 0件の文言には検索語をそのまま返し、次の一手（別の言葉）を添える。行き止まりにしない
コード（コピーして使えます）
<div class="ish">
<label class="ish-label" for="ish-q">記事を検索</label>
<div class="ish-box">
<svg class="ish-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input id="ish-q" class="ish-input" type="search" placeholder="例: 減価償却 CSS 確定申告" autocomplete="off" aria-describedby="ish-count">
<button id="ish-clear" class="ish-clear" type="button" aria-label="検索語を消す" hidden>×</button>
</div>
<p id="ish-count" class="ish-count" aria-live="polite"></p>
<ul id="ish-list" class="ish-list" aria-label="検索結果"></ul>
<p id="ish-empty" class="ish-empty" hidden>「<span id="ish-empty-q"></span>」に一致する記事はありません。言い換えるか、語を減らして試してください。</p>
</div>