オートコンプリート
Autocomplete
別名: サジェスト、オートサジェスト、入力候補、コンボボックス、Suggest、Typeahead、Combo box
生態（さわってみる）
一言定義
文字入力の途中で候補一覧を動的に絞り込み提示する、検索・入力補助UI。
分類
使う場面
- 選択肢の母数が多い（都市名・商品名など）、入力しながら絞り込みたいとき
- 自由入力と候補選択の両方を許し、表記ゆれを吸収したいとき
避ける場面
- 選択肢が少数で固定されているとき（→セレクトボックス）
- 候補データを都度取得するコストに見合わない、ごく単純な入力のとき（→テキストフィールド）
近縁種との比較
セレクトボックスとは、候補を確定リストから選ぶ点は共通するが、入力しながら動的に候補が 絞り込まれる点で異なり、候補の母数が多い（都市名や商品名など）場面に向く。「コンボボックス （Combo box）」はテキスト入力と選択リストを組み合わせた総称で、実装上はオートコンプリートと 同じWAI-ARIA Comboboxパターンを使うことが多いが、自由入力をどこまで許すかという設計思想の 違いで呼び分けられることがあるため、本図鑑ではオートコンプリートをそのaliasesに含めつつ、 両者は同一UIとして1つのカードで扱う。候補データの取得コストに見合わないごく単純な入力 であれば、素直にテキストフィールドに留めるべきである。
実例リンク
アクセシビリティ
- role
- inputに role="combobox" + aria-expanded / aria-controls / aria-autocomplete="list"、候補一覧に role="listbox"、各候補に role="option"
- キーボード操作
- 上下矢印キーで候補間を移動、Enterで確定、Escで候補一覧を閉じる。フォーカスはinputに残したままaria-activedescendantで選択中候補を伝える
- 補足
- WAI-ARIA APGのCombobox（listbox popup）パターンに準拠。自由文字列も許すか候補のみに制限するかで実装のニュアンスが変わる（コンボボックスとの呼称ゆれ）