最近の検索
検索欄にフォーカスすると直近の検索語が並ぶ。行の × で1件ずつ消せ、「履歴を消す」で全部消える。Enter で検索すると先頭に追加され、重複はまとめられる。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 同じ語を繰り返し探す EC・アプリ内検索
- 入力が空のときに前回の検索を再利用させたい欄
- 見られたくない履歴を1件ずつ消させたい画面
- 避ける場面
- 共有端末など履歴が残ること自体が問題な画面
- 文字を打ち始めた後（サジェストに譲る）
- 構成要素
- ラベル
- 検索入力欄
- 検索ボタン
- 履歴パネル
- 履歴行（時計アイコン＋×）
- 履歴を消す
- 持っている状態
- 通常
- ホバー
- フォーカス
- 空
- キーボード
入力欄にフォーカスで履歴が開く。Enter で検索して先頭に追加、↓ で先頭の履歴行へ、行の間は ↑↓、Tab で ×・「履歴を消す」にも到達。Esc で閉じて入力欄へ戻る。フォーカスが欄の外へ出ると閉じる
- 支援技術
form は role=search、label[for] で名前を結ぶ。パネルは aria-label「最近の検索」の region、行は button。× は aria-label「〜を履歴から削除」。検索・削除の結果は aria-live=polite の status で通知
- 動き
なし
デザインの要点
- 履歴は「もう一度探す」ための道具なので、入力が空のときだけ出す。打ち始めたら候補（サジェスト）に譲る
- 1件ずつ消せる × は見られたくない履歴への配慮。「履歴を消す」だけだと全部道連れになる
- 行の左に時計アイコン。サジェストと同じ見た目だと「それは過去に自分が打った語だ」と分からない
実装メモ
プレビュー内のメモリにだけ保持しています。実際のページでは localStorage か利用者ごとのサーバー保存にし、件数上限（10件程度）と消去導線を必ず付けてください。
コード（コピーして使えます）
<div class="rsd">
<form class="rsd-form" id="rsd-form" role="search">
<label class="rsd-label" for="rsd-q">商品を探す</label>
<div class="rsd-field">
<div class="rsd-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="rsd-q" class="rsd-input" type="search" placeholder="キーワードを入力" autocomplete="off">
<button class="rsd-go" type="submit">検索</button>
</div>
<div id="rsd-panel" class="rsd-panel" role="region" aria-label="最近の検索" hidden>
<div class="rsd-panel-head">
<span>最近の検索</span>
<button id="rsd-clear-all" class="rsd-clear-all" type="button">履歴を消す</button>
</div>
<ul id="rsd-list" class="rsd-list"></ul>
<p id="rsd-none" class="rsd-none" hidden>最近の検索はありません</p>
</div>
</div>
</form>
<p id="rsd-status" class="rsd-status" aria-live="polite"></p>
<template id="rsd-clock"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></template>
</div>