← 一覧へ

やってみよう入力欄に「か」や「とう」などを打ってみてください

入力フォームメジャー(よく見る)

オートコンプリート

Autocomplete / Search Suggestions

文字を打ち始めると、入力欄の下に候補がズラッと出てきて、選ぶと入力が完成する。

別名入力補完サジェスト予測変換検索候補コンボボックスTypeahead

どこで使われている?

よく見かける場所
Google検索、Amazonの検索窓、住所入力、乗換案内の駅名
使うとよい場面
候補が決まっていて、入力の手間や打ち間違いを減らしたいとき
避けたい場面
自由に文章を書く欄

補足検索窓で出るものは「サジェスト」とも呼ばれます。

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「オートコンプリート(Autocomplete / Search Suggestions)」を実装してください。

動き:入力欄に文字を打つたびに、その文字を含む候補を入力欄のすぐ下にリストで表示する。一致している部分は太字にし、候補を押すとその言葉が入力欄に入ってリストを閉じる。キーボードの上下キーでも選べる。

使う部品:<datalist>(見た目を自由にするなら自作のコンボボックス)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<datalist>(見た目を自由にするなら自作のコンボボックス)
iPhoneアプリなら.searchable + .searchSuggestions { }
AndroidアプリならSearchBar + 候補リスト(ExposedDropdownMenuBox も使える)
FlutterならAutocomplete(検索なら SearchAnchor)
React Nativeなら標準部品なし。TextInput + FlatList で自作