グループ分けサジェスト
入力に応じて候補を「商品／カテゴリ／記事」の見出し付きで出す。↑↓ で見出しをまたいで移動し、Enter で確定。何が起きるかは行の右に「商品ページ」「一覧」と示す。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- 候補の種類が混ざるときは見出しで分ける。同じ見た目で並ぶと、商品名なのかカテゴリなのか押すまで分からない
- 各群は3件まで。多く見せるより「その群にもっとある」と分かる方が、次の一手（群の一覧へ）につながる
- 行の右端に行き先を書く。押した結果が商品ページか一覧かで、利用者の心構えが違う
コード（コピーして使えます）
<div class="gsg">
<label class="gsg-label" for="gsg-q">ストア内を検索</label>
<div class="gsg-field">
<div class="gsg-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="gsg-q" class="gsg-input" type="search" value="リネン" placeholder="例: リネン、鍋、収納" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="gsg-list">
</div>
<ul id="gsg-list" class="gsg-list" role="listbox" aria-label="候補" hidden></ul>
</div>
<p id="gsg-status" class="gsg-status" aria-live="polite">入力すると候補が出ます。↑↓ で移動、Enter で決定</p>
</div>