jquery - 使用 jQuery 的 Facebook 状态更新类自动完成/标记功能

Question

我想创建一个文本输入，如 Facebook 状态更新发布者。基本上，可以使用某个键（例如：@）激活标记/自动完成功能的输入，创建在文本输入中充当单个字符的标签（可以使用单个退格键删除），但仍接受常规文本输入. 与 Facebook 不同，我只想接受一个这样的“标签”，并且只在输入的开头接受它。

似乎最可行的选择（使用 jQuery）是一个 contenteditable div。但是，我不知道从那里如何处理 jQuery。任何人都可以帮助我开始吗？谢谢。

Answer 1

第一个答案中的标记化自动完成插件并没有完全完成问题的要求。该插件仅允许您构建搜索结果列表，中间没有常规文本。

我最终为此编写了自己的解决方案，可以在这里找到：

http://www.hawkee.com/snippet/9391/

Answer 2

我的一个朋友上周遇到了这个“问题”。他最终使用了这个非常不言自明的插件：

http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

Answer 3

希望到现在（6 年多后）您已经设法找到适合您需求的现有解决方案，或者您已经设法推出自己的解决方案。如果您还没有，我认为以下内容会对您有所帮助，而那些偶然发现这里的人正在寻找这样的解决方案。

“提及”管理实用程序具有 3 个组件：

1. 自动完成模块：负责获取和显示可用于创建提及的项目集的组件，给定一个字符串。

2. 提及跟踪模块：负责跟踪提及相关数据的组件；至少应在对附加实用程序的输入元素文本的所有修改过程中跟踪每次提及的位置以及表面和实质（如果存在）值。

3. 提及视觉区分模块：负责将提及文本与附加实用程序的输入元素中的其余文本区分开来的组件

希望这样一个实用程序的分解能让您了解如何推出您自己的实现。

如果您更愿意使用现有的健壮实现，请查看Mentionator，这里由这个人维护 :)。