我们都熟悉自动完成的概念，对吧？您在搜索框中输入内容，它会在您键入时尝试猜测您要查找的内容，并显示建议，通常在光标下方。虽然我们习惯于在将电子商务网站重定向到搜索或产品页面的情况下使用自动完成，但当用作辅助搜索模式以增强键入体验时，它是一种被低估的用法。
在现代 Web 应用程序中，组合框不必是乏味的纯文本区域，也不必局限于富文本格式。Twitter、Slack、Notion、Google Docs 和 Asana 等社交和生产力应用程序普及了“@提及”模式，允许您在键入时引用其他用户。您可以使用触发器（例如@ 或# 字符）提及另一个人、一个频道、一个文件或某些其他可查询对象。这将打开一个带有建议的面板，让您能够使用正确的引用完成消息。
文本框充当搜索输入，而建议面板充当键入助手，允许用户在不离开键盘的情况下引用正确的资源。如果正确实现，则所有内容都只需几个按键即可完成，包括用户拼写错误的情况。
除了为组合框提供支持外，此模式还能在用户生成的内容中保持一致性。标签就是一个很好的例子：用户可以自由地在自由格式的上下文中创建半结构化数据，然后有助于对内容进行分类，而无需对其进行后处理。一旦用户在文档中提及了其他人、引用的资源或添加了多个标签，您就会获得所有可用于您的应用程序的资源之间的连接图，从而大大简化了推荐相关内容并了解用户思维的方式。
构建@提及的基础知识
除了让用户找到他们想要的内容之外，一个优秀的@提及自动完成功能应该尽可能流畅。目标是创造一种无缝的键入体验，其中模式的行为就像一个在你键入时学习并帮助你的助手，但它知道何时该避开你的路。您可以继续键入，忽略建议并让它们消失，或者您可以利用它们来无缝地完成您的消息。
在 Twitter 上，它通过提及和标签普及了这种模式，该面板会在不再将键入的单词视为标记时立即关闭，以避免打扰那些想要退出用户。Twitter 用户句柄不支持空格，因此它在空格后立即关闭面板。
空格键时关闭@提及面板。Slack 的工作方式略有不同，允许使用空格来搜索完整姓名。它使用不同的启发式方法来确定用户想要退出的信号。
选择建议时，Twitter 会关闭面板、替换标记并添加空格，以便用户可以无缝地继续键入。这种对细节的关注在孤立的情况下可能看起来微不足道，但当它们累积起来时，会产生一种流畅感，让用户能够拥抱这种模式而不是与之对抗。
当您开始在这样的组合框中添加提及时，它们会成为文本的一部分，但还应保留完整的交互性以允许用户编辑它们。
例如，在 Twitter 上，您可以通过单击提及或使用左和右箭头键导航文本框来“聚焦”提及。Twitter 检测到它并重新打开面板，并将提及作为搜索查询。它确保在发送推文时会通知谁，并允许您在出现错误时编辑提及。
使用开源Autocomplete 库可以轻松构建此类体验。Autocomplete 旨在与Algolia 最佳集成，但适用于任何静态或远程源。它允许您构建多源动态且可访问的自动完成体验，并且非常适合@提及功能。
混合不同类型的建议
当您只有几种不同的类型（例如，人员为“@”，标签为“#”）时，每个结果类型使用一个符号效果很好。一旦您拥有更多类型并且限制变得模糊，用户很可能无法记住所有类型。隔离它们可能会使体验更加繁琐。
相反，为每个符号分配多个类型并使用联合搜索（多源）有助于发现所有可能的类型，而无需“学习”太多模式。
在 Slack 中，建议会混合并使用视觉线索（例如不同的图标和徽章）进行区分。但是，结果看起来与您在应用程序的其他部分体验到的结果类似。例如，人员建议会显示用户的头像、显示名称和状态。这有助于用户对他们提及的人或事物更有信心。
在 Notion 中，建议按类型分组。与典型的搜索体验（优先考虑每个结果的相关性）不同，这种方法优先考虑一致性：在您细化查询之前，您始终会先获得日期，然后是人员，然后是链接。这有助于用户在使用该工具时建立肌肉记忆，通过设定对事物位置的预期。
可以通过同时查询多个源或使用 Autocomplete 的Reshape API 等分组机制来实现按类型分组，这些机制可在检索结果后转换结果。
Notion 的另一个很酷的模式是动态占位符或预测性建议，它们根据活动建议注入这些占位符。默认情况下，占位符通过提示用户可以执行的操作来帮助用户采取行动。然后，当他们浏览时，占位符会更新，让用户知道如果他们选择一个建议会发生什么。
用户可以使用
Enter 或Tab 应用建议。深入了解 Notion 的代码，您可以看到他们如何利用CSS 自定义属性 来做到这一点：每次您在建议之间移动时，它们都会使用 JavaScript 在输入的父元素上设置 CSS 变量--pseudoAfter--content。然后，此 CSS 变量与::before伪元素上的content属性一起使用。很巧妙！
当从多个源中提取结果时，控制结果数量可能会变得更加困难。这是因为每个源可能会返回请求建议的数量或更少，如果它没有足够的匹配项。这可能导致“跳跃”的 UI，其中结果数量会随着用户键入而波动。
您可以使用包含滚动条的固定高度面板或使用 Autocomplete 的Reshape API 等组合和限制机制来缓解此问题。
跳出搜索结果的思考
当您像我一样每天都在处理搜索和发现时，您会开始在各个地方看到它。当您超越其典型实现方式时，@提及模式的创造力令人惊叹。
如果您使用 Slack，您可能习惯于通过键入“:”然后按名称细化来查找表情符号。虽然它看起来不像搜索或提及，但它使用了完全相同的机制：您使用特殊字符打开一个建议面板，搜索正确的项目，并在选择时“应用”它。
在 Notion 上，这一点更为突出，因为面板根本不像搜索结果。
有趣的是，当更改简单的事情（如项目模板和以不同方式设置结果样式）时，该模式的通用性有多强。它在组合框中集成得更好，并创造了一种用户在他们使用的所有应用程序中都认可的流畅体验。
超越类型完成
在组合框中使用动态建议时，提及是最常见的用例，但您可以更进一步。虽然提及可以帮助您“完成”句子并增强键入体验，但组合框也可以用作用户和应用程序之间的对话界面。
在 Notion 中，输入特殊字符“/”可以访问插入操作。你仍然可以通过继续输入来细化建议，但与填充输入不同的是，选择一个结果会创建一个给定类型的新区块。
这种模式通常被称为“快捷方式”或“斜杠命令”，它起源于游戏聊天，并已成为 Slack 和 Discord 等通用聊天应用程序的标准。
例如，发起 Zoom 会议、离开频道、发布 GIF 等。
快捷方式很有趣，因为它允许用户在一个地方执行常见任务，而无需查找功能。例如，与远程同事进行即席 Zoom 会议很常见，通常需要通过 Slack 发送 Zoom 链接。但是，必须打开 Zoom、复制链接，然后将其粘贴到 Slack 中非常麻烦。“/zoom” 快捷方式通过在一个界面中集中常见任务来消除这些障碍。
虽然像斜杠命令这样的功能过去只针对高级用户，但现在它们正在越来越多的应用程序中出现，并面向各种用户。
最终，增强打字体验并不是为了解锁“高级功能”，而是为了发现内容，以及减少摩擦和认知负担：与其提前向用户讲解系统的复杂性，**你是在用户需要时，在合适的地方提供正确的信息。**