可输入选择框输入
它把文字输入和候选列表放在一起,用户既能输入,也能从匹配结果中选择。
- 可以打字也可以从下面选的框
- 输几个字就出来候选项的输入框
- 既能自己填又能挑现成答案
- 组合框
- 自动补全框
- 可搜索下拉框
示例
Web / iOS / Android 对照
Web原生支持
桌面与移动端现代浏览器;样式和过滤能力有限
Datalist Input
也叫 Combobox
<input list="…"> + <datalist>
原生 datalist 提供基础建议列表;复杂远程搜索仍需自定义可访问组合框。
iOS需自己实现
iOS / iPadOS
Combo Box
也叫 Autocomplete
苹果移动平台没有通用可编辑组合框,通常把搜索输入和结果列表作为两个部分组合。
通常怎么做:使用 TextField 或 searchable 接收输入,在下方列表呈现建议并管理选中状态。
Android原生支持
Android 手机 / 平板
Exposed Dropdown Menu
也叫 Editable Exposed Dropdown Menu · Autocomplete
在 Android 上,这和选择菜单是同一个控件 →Android 用同一个 Exposed Dropdown Menu 承接可输入和不可输入两种下拉,靠 readOnly 区分。Compose Material 3: ExposedDropdownMenuBox + TextField
使用规范
什么时候用
- 候选项很多,用户可以通过输入快速缩小范围,或允许自定义值
什么时候别用
- 候选只有几项,或输入任意值会造成无法校验的数据
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。