もしかして
「ぶらうざ」のようなかな違い・打ち間違いで0件になったとき、辞書との編集距離が近い語を「もしかして: ブラウザ」と提案する。押すとその語で検索し直す。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 0件のときに最初に出すのは「言い換え候補」。利用者の側に打ち直しの負担を残さない
- 候補は辞書（実際に結果がある語）から選ぶ。存在しない語を提案すると、押した先でまた0件になる
- 元の検索語は残したまま候補を添える。勝手に置き換えると「そんな語は打っていない」という不信が生まれる
コード（コピーして使えます）
<div class="dym">
<form class="dym-form" id="dym-form" role="search">
<div class="dym-box">
<svg 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="dym-q" class="dym-input" type="search" value="ぶらうざ" autocomplete="off" aria-label="記事を検索">
<button class="dym-go" type="submit">検索</button>
</div>
</form>
<p class="dym-head" id="dym-head" aria-live="polite"></p>
<p class="dym-suggest" id="dym-suggest" hidden>もしかして: <button id="dym-fix" class="dym-fix" type="button"></button></p>
<ul class="dym-list" id="dym-list" aria-label="検索結果"></ul>
<p class="dym-tips" id="dym-tips" hidden>ヒント: かな・カナや英字の大文字小文字は区別しません。語を短くして試してください。</p>
</div>