模仿 Facebook 的提及系统

Question

我遇到了一个可怕的问题，过去两天我一直在绞尽脑汁，但还没有想出解决方案。因此，我认为这需要比我更聪明的人来完成。

我正在尝试构建的是一个模拟 Facebook 的文本框；本质上是标记功能。

现在，如果您使用过 Facebook，您会注意到 Facebook 允许您标记评论/帖子中的人，只需输入他们的姓名并从下拉列表中进行选择。然后，您选择的人的姓名将出现在该文本区域中突出显示的文本中。我已经成功地创建并填充了 JQuery 和 AJAX 组合的下拉列表，但标记过程本身就是障碍。

选择下拉项后（通过 Enter 或单击），查询文本将替换为标记名称。现在，很难看出如何给 textarea 中的文本添加任何类型的突出显示，所以我发现（通过检查 Google Chrome 中的元素并删除 textarea 节点）textarea 本身是透明的，并且有一个白色“模拟”文本下方的 div。突出显示的单词被放置在带有自定义 CSS 的标签中，这使它具有蓝色背景。这一切都是我自己发现的，并且我已经成功模拟了这个——但我只能做一个标签。

现在我进一步调查并发现了一个输入 type="hidden" 元素，属于“mentionsHidden”类。这个 input 元素有一个 value 属性，它根据 textarea 的内容动态地填充自己。因此，如果我键入“ABC”，则元素的值将变为“ABC”。如果我包含标签，请说“嗨 [Rei]！” （其中 [] 中的名称是标签），元素的值变为“hi @[member_id:Rei]！”。

所以我已经完成了我的作业。但是我想不通的部分来了。

我不知道如何准确地用文本框的值动态填充隐藏的输入元素。很明显，给出蓝色标签背景的底层 div 是从输入元素填充的。但是输入元素让我很头疼。

你看，我不能做以下事情：

-我不能简单地“复制”当前文本区域的整个值并将其“粘贴”到输入元素的值中，因为这会覆盖输入元素中任何先前标记的人（毕竟，文本区域只能拥有明文）。

-尽管我可以找到插入符号的当前索引（textarea 中闪烁的黑线，它告诉您要在哪里输入），但这仅适用于 textarea。文本区域和输入元素值中的索引位置 10 可能是不同的东西，因为这种“标记”人的方式会导致向值字符串添加额外的字符。

-我不能简单地对要替换的文本进行“替换”，因为在值 String 的其他部分中可能存在相同文本的其他实例。

我知道这是一篇很长且令人困惑的帖子，但我希望你能明白我的意思。我真的需要一个解决方案，我不想使用 contenteditable，因为它只适用于 HTML5，一些旧版浏览器可能不支持它。

你的， 雷

Answer 1

我希望您能够提出或找到解决问题的方法。由于这里似乎没有一个，我想为任何可能偶然发现这一点的人提供一个（如果我的假设不正确，也包括你）。

您将需要按照它们出现的顺序维护textarea 中每个现有提及的明确位置数据。如果在修改textarea 中的内容后，其中提及的位置发生了变化，则需要确定其值的哪个外观（如果有）将用于表示它，并适当更新位置数据的提及。

有了这样的数据集合，构造mentionsHidden的值就变得微不足道了，尽管这样的数据的存在使得元素变得不必要。

Mentionator 是一个现有的、强大的解决方案，它采用这种方法来提供您尝试重新创建的功能。考虑到它结构良好、易于理解且评论丰富，它应该对您有用，既可以作为开箱即用的解决方案，也可以作为参考材料，在您推出自己的解决方案时引用。它是由你真正维护的:)。