可输入选择框输入

它把文字输入和候选列表放在一起,用户既能输入,也能从匹配结果中选择。

  • 可以打字也可以从下面选的框
  • 输几个字就出来候选项的输入框
  • 既能自己填又能挑现成答案
  • 组合框
  • 自动补全框
  • 可搜索下拉框

示例

WebDatalist Input原生支持
iOSCombo Box需自己实现
AndroidExposed Dropdown Menu原生支持

Web / iOS / Android 对照

Web原生支持

桌面与移动端现代浏览器;样式和过滤能力有限

Datalist Input

也叫 Combobox

<input list="…"> + <datalist>

原生 datalist 提供基础建议列表;复杂远程搜索仍需自定义可访问组合框。

Android原生支持

Android 手机 / 平板

Exposed Dropdown Menu

也叫 Editable Exposed Dropdown Menu · Autocomplete

在 Android 上,这和选择菜单是同一个控件 →Android 用同一个 Exposed Dropdown Menu 承接可输入和不可输入两种下拉,靠 readOnly 区分。
Compose Material 3: ExposedDropdownMenuBox + TextField

使用规范

什么时候用

  • 候选项很多,用户可以通过输入快速缩小范围,或允许自定义值

什么时候别用

  • 候选只有几项,或输入任意值会造成无法校验的数据

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。