自动完成 Autocomplete
用户在路线规划表单中输入出发站名称,从候选列表选择上海虹桥站并回填到当前字段。
前端与交互约 10 分钟 · 从真实需求理解
1为什么输入后还要从候选中确认?
出发站
Autocomplete 把关键词输入和候选建议放在同一个字段关系里:用户先缩小范围,再确认一个系统认识的规范值。
路线规划里输入“虹桥”后,候选可以帮助用户选中“上海虹桥站”;选择完成后,结果仍回到出发站字段,而不是留下一段未经确认的模糊文字。
2Autocomplete 和 Select、Input,什么时候不能互换?
Autocomplete 不是带装饰的 Input,也不是把所有选项都藏起来的 Select;它适合“候选集合较大,但用户可以通过关键词快速缩小并确认规范值”的关系。
- 候选只有几个、无需搜索时,Select 直接列出固定选项更省认知成本。
- 内容可以是任意地址、备注或临时文字时,普通 Input 或 Textarea 不应伪装成有候选的字段。
判断时要确认候选项是否真实、选择后是否能回填规范值,而不是只看输入框是否会弹出列表。
3Autocomplete 的输入与候选如何组成一个字段?
出发站
一个可用的 Autocomplete 至少要让用户看见字段标签、关键词输入、贴近字段的候选项,以及选中后回填的值。
- 输入字段是用户开始搜索和继续修改关键词的地方。
- 候选列表应该和当前关键词相关,并能被键盘和辅助技术逐项访问。
- 选择结果回到原字段,用户无需在另一个区域寻找最终值。
4选择候选后,结果怎样回到原字段?
路线规划中选择出发站
路线规划表单路线规划
先确认规范出发站,再继续规划。
真实行为要保留从关键词到候选再到回填的路径;如果结果只显示在字段外的提示里,用户仍然不知道表单实际提交了什么。
5什么时候该用 Autocomplete?
用户输入关键词,最终仍从真实车站候选中确认一个值。
建议会紧贴输入框出现,选中后回填当前字段。
候选少且无需输入关键词时,Select 直接列出选项。
选择结果会回到当前字段。
没有可确认的候选集合时,使用自由文本输入。
看候选集合和输入自由度:候选很多且需要确认规范值时用 Autocomplete;候选很少用 Select;没有候选边界的自由文本用普通 Input 或 Textarea。
6怎样把 Autocomplete 需求告诉 Agent?
请在路线规划表单中使用 Autocomplete 实现出发站:用户输入“虹桥”后显示真实候选,候选项可用键盘访问,选中“上海虹桥站”后回填同一个字段并保留可读的选择结果。候选很多时允许继续输入筛选,候选很少则不要强行做搜索;验收时确认没有把自由地址当成候选值,也不要把结果放到字段外的第二张卡片里。
7不用背,看看你能不能判断
1 / 3
Autocomplete 最关键的结果关系是什么?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。