ITワクワク塾Autocompleteとは？入力中に候補を示すUIパターン
参照したオンライン文書の版番号：未確認
Autocompleteは文字を入力すると関係する候補が現れる仕組みです。候補を必ず選ぶ入力なのか、候補にない文字も認めるのかによって、動作が変わります。
Autocompleteとは
W3CのCombobox Patternが説明するのは、入力欄と候補の一覧を組み合わせた操作です。候補は選べる値の全体を示す場合と、入力を助ける提案として示す場合があります。MUIのAutocompleteも、候補から選ぶcombo boxと、自由に入力できるfree soloの例です。
入力欄に候補が出るだけでは完成しません。候補を選ばずにEnterを押した場合、該当する候補がない場合、通信中に別の文字を入力した場合の扱いまで決めます。
2つの画面例
左は駅名の選択で、用意された候補から選ぶ入力です。右は読書メモのタグ付けで、候補にない語も追加できるようにしました。架空の画面では左に「候補から選択」、右に「新しいタグとして追加」を明記して違いを見せています。
候補はキーボードで移動して確定できる設計です。W3Cのパターンでは下矢印で候補へ移り、Enterで確定、Escapeで候補を閉じます。入力欄に必要なラベルを付け、候補が開いている状態も支援技術へ伝える設計です。
実例から見る設計の違い
入力に応じて候補を出すAndroid Developersの検索欄から、候補の絞り方が違う2画面を見比べます。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。
例1：入力文字に合う候補を絞る
「a」を入力した後、該当する候補を下へ並べています。候補が変わるタイミングと、現在の入力を残すことが重要です。
例2：補助情報付きの候補を見せる
こちらは菓子の名前に補助説明と印を付けた一覧です。候補を選ぶ前に何を選択するのか判断できる一方、情報を増やしすぎると候補を走査しにくくなります。
W3CのCombobox Patternは手動選択と自動選択の違いを示す資料です。MUIのAutocomplete実例には自由入力の例も掲載されています。
駅名のように候補からしか選べない入力では、候補にない値を確定させないことを説明してください。自由入力では候補の選択と新しい値の追加を混同させない文言にします。
AIに画面を依頼するとき
駅名の入力欄を作ってください。文字に合う候補を表示し、候補からだけ選べるようにします。下矢印と上矢印で移動し、Enterで確定、Escapeで候補を閉じてください。候補が0件ならその状態を示し、選ばないまま確定した場合は入力を促してください。