最近の検索
検索欄にフォーカスすると直近の検索語が並ぶ。行の × で1件ずつ消せ、「履歴を消す」で全部消える。Enter で検索すると先頭に追加され、重複はまとめられる。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 履歴は「もう一度探す」ための道具なので、入力が空のときだけ出す。打ち始めたら候補（サジェスト）に譲る
- 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" aria-expanded="false" aria-controls="rsd-panel">
<button class="rsd-go" type="submit">検索</button>
</div>
<div id="rsd-panel" class="rsd-panel" 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>