自动完成
Autocomplete
初级通用自动完成(Autocomplete)是在表单输入时,根据已输入的内容显示可选建议的交互。它能帮你更快填入名称、地址等信息,减少输入和拼写错误;例如输入客户名称的前几个字,就能从已有客户中挑选。
你可能会说:「我想让用户填客户名称时,打几个字就看到匹配的客户,点一下便能填进去。」
动手看看报价单客户自动完成
用「输入与选择」模拟键入和选中客户;也可以悬停建议、按住查看反馈,或按 Tab 聚焦。建议浮在表单上方,会挡住后面的「联系人」字段。
要点自动完成是怎么帮用户填表的?
- 1
建议跟着输入内容变化
你在后台填写客户名称时,输入“星”后出现匹配的客户,继续输入“星河”后结果变少,这就是自动完成的核心过程。候选可以来自本地数据,也可以来自服务端查询。
- 2
选中建议才算确定结果
输入的字只是查询线索,选中建议才可能确定某个客户。比如系统要保存客户 ID,就不能只拿输入框里的名称当作已选客户;用户改动文字后,原先选中的客户也可能需要清除。
- 3
候选之外能否输入要说清
有的字段允许用户输入新内容,例如自定义标签;有的字段只能关联已有记录,例如从客户库选择开票对象。两者都能显示建议,但提交时的校验不同,和 AI Agent 描述需求时要讲明白。
- 4
键盘操作和结果状态也重要
用户不一定用鼠标点候选,还可能用方向键和回车键选择。若没有匹配结果,界面也要让人知道是确实没有,还是仍在加载;否则用户很难判断下一步该继续输入还是换个词。
容易混淆的地方
自动完成和选择器都能让用户选现有选项,但自动完成会随着输入缩小候选范围,更适合选项很多、用户知道要找什么的情况。它也不同于浏览器的自动填充:后者通常利用用户保存过的信息填表,不一定查询你产品里的候选数据。若只是查找内容而不填表,这更接近搜索。
什么时候用
适合用
- 在订单后台关联客户,客户数量很多,但操作员通常记得名称的一部分,可以边输入边找。
- 在地址表单里填写城市,让用户按地名查找候选,减少翻找长列表的时间。
- 给项目添加已有成员,用户输入姓名或邮箱片段后,从团队成员中选择对应账号。
不适合用
- 只有三种固定配送方式时,直接用单选框展示更省事,没必要让用户先输入再找。
- 填写一段给客服的详细说明时,用多行文本框更合适,因为内容不是从候选项中挑选。
- 用户要浏览全部商品分类、又不知道分类名称时,先展示分类列表或层级导航,比要求输入关键词更合适。
练一练选一个答案,看看解释
你在做开票表单:企业客户库里有几万家公司,提交时必须记录客户 ID。用户通常只记得公司名称的一部分。你会让 AI Agent 怎么做?
让 AI 帮你做复制给 AI Agent 直接用
请给开票表单的客户字段做自动完成:用户输入公司名称片段时查询并显示匹配客户,支持键盘选择;选中后保存客户 ID。若用户修改已选名称,清除原选择。没有结果时给出明确提示,提交时只接受已选客户。