跳到正文

自动完成

Autocomplete

初级通用

自动完成(Autocomplete)是在表单输入时,根据已输入的内容显示可选建议的交互。它能帮你更快填入名称、地址等信息,减少输入和拼写错误;例如输入客户名称的前几个字,就能从已有客户中挑选。

你可能会说:「我想让用户填客户名称时,打几个字就看到匹配的客户,点一下便能填进去。」

动手看看

新建报价单
客户名称
华
华星
华星科技有限公司
联系人
选择客户后填写联系人
报价有效期
华星科技有限公司客户编号 KH-1024
华星贸易有限公司客户编号 KH-1086
华丰设计工作室客户编号 KH-1132
华星科技有限公司客户编号 KH-1024
华星贸易有限公司客户编号 KH-1086
输入与选择
显示建议

用「输入与选择」模拟键入和选中客户;也可以悬停建议、按住查看反馈,或按 Tab 聚焦。建议浮在表单上方,会挡住后面的「联系人」字段。

要点

  1. 1

    建议跟着输入内容变化

    你在后台填写客户名称时,输入“星”后出现匹配的客户,继续输入“星河”后结果变少,这就是自动完成的核心过程。候选可以来自本地数据,也可以来自服务端查询。

  2. 2

    选中建议才算确定结果

    输入的字只是查询线索,选中建议才可能确定某个客户。比如系统要保存客户 ID,就不能只拿输入框里的名称当作已选客户;用户改动文字后,原先选中的客户也可能需要清除。

  3. 3

    候选之外能否输入要说清

    有的字段允许用户输入新内容,例如自定义标签;有的字段只能关联已有记录,例如从客户库选择开票对象。两者都能显示建议,但提交时的校验不同,和 AI Agent 描述需求时要讲明白。

  4. 4

    键盘操作和结果状态也重要

    用户不一定用鼠标点候选,还可能用方向键和回车键选择。若没有匹配结果,界面也要让人知道是确实没有,还是仍在加载;否则用户很难判断下一步该继续输入还是换个词。

容易混淆的地方

自动完成和选择器都能让用户选现有选项,但自动完成会随着输入缩小候选范围,更适合选项很多、用户知道要找什么的情况。它也不同于浏览器的自动填充:后者通常利用用户保存过的信息填表,不一定查询你产品里的候选数据。若只是查找内容而不填表,这更接近搜索。

什么时候用

适合用

  • 在订单后台关联客户,客户数量很多,但操作员通常记得名称的一部分,可以边输入边找。
  • 在地址表单里填写城市,让用户按地名查找候选,减少翻找长列表的时间。
  • 给项目添加已有成员,用户输入姓名或邮箱片段后,从团队成员中选择对应账号。

不适合用

  • 只有三种固定配送方式时,直接用单选框展示更省事,没必要让用户先输入再找。
  • 填写一段给客服的详细说明时,用多行文本框更合适,因为内容不是从候选项中挑选。
  • 用户要浏览全部商品分类、又不知道分类名称时,先展示分类列表或层级导航,比要求输入关键词更合适。

练一练

你在做开票表单:企业客户库里有几万家公司,提交时必须记录客户 ID。用户通常只记得公司名称的一部分。你会让 AI Agent 怎么做?

让 AI 帮你做

请给开票表单的客户字段做自动完成:用户输入公司名称片段时查询并显示匹配客户,支持键盘选择;选中后保存客户 ID。若用户修改已选名称,清除原选择。没有结果时给出明确提示,提交时只接受已选客户。

接下来学什么