サジェスト候補表示型検索
サジェスト候補表示型の検索バーは、入力欄の下に候補リストを重ねて出すUIです。ピル型の角丸バーに <input type="search"> を置き、下の .sr-sg__list に「よく検索される」キーワードをあらかじめ並べておく構造になっています。
このパーツの使いどころと実装ポイント
サジェスト候補表示型の検索バーは、入力欄の下に候補リストを重ねて出すUIです。ピル型の角丸バーに <input type="search"> を置き、下の .sr-sg__list に「よく検索される」キーワードをあらかじめ並べておく構造になっています。虫眼鏡アイコンはインラインSVGで埋め込まれているため、外部のアイコンフォントに依存せず単体で動きます。
向いている場面
- 商品数が多く名前で探したいECサイト
- 記事や用語が多いメディア・ヘルプサイト
- 絞り込みの入口を分かりやすくしたいサービストップ
固有の勘所は、初期表示の候補に「人気の検索語」を入れておくこと。まだ何も打っていない段階でも探すヒントを与えられ、空の検索結果に当たる確率を下げられます。入力が始まったら候補を実データに差し替える前提で組むと自然です。
実装上の注意
候補は <a> で並んでいるので、キーボードの上下キーで選べるようにすると使い勝手が上がります。スマートフォンでは候補リストが画面下に潜らないよう高さに上限を設けてスクロールさせ、type="search" の利点である端末標準のクリアボタンも活かします。読み上げ環境向けに候補数を伝える配慮もしておくと安心です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
候補はどこから出していますか
このサンプルはあらかじめ用意した人気キーワードを表示するデモです。実運用では入力された文字をもとにサーバーへ問い合わせ、返ってきた候補リストに差し替える形にします。
アイコンは別途読み込みが必要ですか
不要です。虫眼鏡はインラインSVGとして直接HTMLに埋め込まれているため、アイコンフォントや画像ファイルを追加で読み込まなくてもそのまま表示されます。