因此，您想构建@mention自动完成功能吗？

自动完成是一个熟悉的功能：在搜索框中输入，并出现建议。虽然在电子商务中常见，但它用作打字增强的使用通常被忽略了。

现代网络应用程序正在超越简单的文本领域。 Twitter，Slack和Intion等社会和生产力平台采用了“ @Mention”模式，允许用户使用诸​​如“@”或“＃”之类的触发器引用其他模式。这通过提供建议面板来增强打字体验，从而可以快速参考而无需离开键盘。

这种模式提高了用户生成的内容的一致性。例如，主题标签在自由形式的文本中创建半结构化数据，帮助内容分类。提及跨应用程序资源创建连接图，简化内容建议和用户行为分析。

查看实时演示，查看我们如何构建###制作有效@Mentions

成功的@Mention自动完成应该是无缝的。它是一位有益的助手，在您输入时学习，但知道何时辞职。用户可以忽略建议或轻松使用它们来完成其输入。

当键入单词不再是有效的令牌时，Twitter的实现将关闭面板（例如，在空间之后，由于手柄不包含空格）。 Slack的方法更加灵活，可以使用不同的启发式方法来检测用户意图，从而可以进行全名搜索。

选择后，Twitter关闭面板，插入提及，并为继续键入添加空间。这个看似很小的细节有助于流畅的用户体验。

提到一旦添加，就变得互动了。在Twitter上，单击或使用箭头键选择“提及”重新打开面板，允许编辑并确保发送时正确通知。

开源自动完成库简化了此过程。虽然理想适合Algolia，但它可以与任何数据源一起使用，并促进构建多源，可访问的自动完整功能。

结合建议类型

使用不同的符号（例如，“@for People”，“ for Hashtags”＃）与很少的，明确定义的类型效果很好。但是，由于多种或多或少的类型，用户可能难以记住所有符号。

联合搜索（多源）允许每个符号分配多种类型，从而提高可发现性，而不会压倒多种模式的用户。

Slack混合建议，以视觉上的区分（图标，徽章）。概念小组按类型（日期，人，链接）提出建议，促进一致性和用户肌肉记忆。可以通过多源查询或诸如AutoComplete的Reshape API之类的工具来实现此分组。

概念还利用动态占位符，用户浏览时更新的预测建议，并阐明与每个建议相关的操作。他们巧妙地使用CSS自定义属性和JavaScript来实现这一目标。

管理多个来源的结果数量可能具有挑战性。带有滚动栏的固定高度面板或使用组合/限制机制（例如AutoComplete的Reshape API）可以解决此问题。

扩展超出基本搜索

@mention模式的多功能性超出了其典型的实现。 Slack的表情符号搜索（使用“：”）和Notion的动作插入（“/”）使用类似的机制：特殊字符打开建议面板，允许选择和应用。

概念的方法通过自定义项目模板和样式突出了模式的适应性。这在各种应用程序中创造了熟悉而流畅的体验。

请参阅演示###超越类型完成

虽然提到增强打字，但组合框可以用作对话界面。概念的“/”快捷方式触发了动作插入，创建了特定类型的新块。

这种“斜线命令”模式在游戏中普及，现在已成为Slack和Discord之类的应用程序中的标准配置。它集中了共同的任务，减少摩擦和认知负荷。例如，“/Zoom”命令简化了启动和共享缩放会议。

以前仅限于Power用户，Slash命令变得越来越普遍和用户友好。增强打字体验不是添加复杂的功能，而是在正确的时间提供正确的信息，减少认知负载并改善用户体验。

见演示

以上是因此，您想构建@mention自动完成功能吗？的详细内容。更多信息请关注PHP中文网其他相关文章！