サジェスト候補付きサーチ
入力するとすぐ下に候補リストが現れる、オートコンプリート風のサーチ UI です。あらかじめ用意した配列を input イベントで絞り込み、入力文字を含む項目だけを li として描き、 is-open クラスでリストを開閉します。候補をクリックするとその語が検索欄に入り、リストは閉じます。
解説
入力するとすぐ下に候補リストが現れる、オートコンプリート風のサーチ UI です。あらかじめ用意した配列を input イベントで絞り込み、入力文字を含む項目だけを li として描き、is-open クラスでリストを開閉します。候補をクリックするとその語が検索欄に入り、リストは閉じます。候補ボックスは position:absolute で入力欄に重なり、影付きで浮いて見えます。
使う場面
- EC サイトの商品名・ブランド名の検索補助
- 観光・不動産サイトのエリア名入力
- 人材サイトの職種・スキル名のサジェスト
サンプルは固定配列ですが、実運用では入力のたびにサーバーへ問い合わせる方式に差し替えられます。その際は入力ごとの通信を間引く（デバウンス）と無駄なリクエストを減らせます。現状はマウス前提なので、上下キーでの候補移動や Enter 確定、role=listbox 等の付与を足すとキーボード・読み上げ利用者にも使いやすくなります。候補が 0 件のときはリストを開かない作りなので、空の箱が出る違和感もありません。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
候補をサーバーから取得する形に変えられますか。
できます。固定配列を絞り込んでいる部分を、入力値を使った API リクエストに置き換え、返ってきた結果をリストに描けば動的なサジェストになります。入力ごとの通信は間引くと負荷を抑えられます。
キーボードだけで候補を選べますか。
このサンプルはクリック選択が前提です。上下キーで候補を移動し Enter で確定する処理と、読み上げ用の属性を足すと、マウスを使わない人にも対応できます。