即時検索＋一致ハイライト
入力のたびに記事一覧を絞り込み、一致した文字を <mark> で強調する。件数はライブで更新され、空白区切りの複数語は AND で効く。0件では言い換えを促す。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 一致箇所を強調すると「なぜこれが出たか」が説明され、利用者は結果を疑わずに済む
- 件数は「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>