自动完成textarea选择器javascript jquery的中间部分

Question

我已经看过如何在单个textarea中有多个自动复合，但我想要的是有一些东西可以在textarea的中间选择一个术语，或者更确切地说是光标在/ textarea中的位置。我见过的大多数解决方案只有在用户正在处理输入字符串的末尾时才有效。我想有一些能够以字符串开头的东西：   “@George踩到#foot。” 然后返回到字符串的中间并开始键入以将其更改为：   “根据@Mary的说法，@ George踩到了@Fredrick的#foot。” @Fredrick和@Mary分别显示为自动完成选项。

对于我想要此功能的特定用途，自动完成将发生在以“@”或“＃”符号开头的字符串上，但它们不一定是给定符号的第一个或最后一个。

我正在使用javascript和jquery-ui完成此任务。这适用于移动设备，因此自动填充的位置始终位于文本区域的底部。

Answer 1

我实际上是在实现非常相似的东西。我查看了Google+，他们使用的是contenteditable Chrome和iframe混合版Firefox。

我获得rangy获得当前选择的成功。

我尚未解决的事情：

• 正确检测用户何时开始输入@或＃，这比看起来更难，尤其是如果您在输入区域中注入 HTML。
• 获取当前选择的x，y位置，以便您可以定位自动完成建议。据说rangy已经可以做了，但它还没有正式发布（有一个working demo though）。

Answer 2

我发现通过使用textarea.selectionStart值，然后从该索引循环回到标记的开头，然后再次使用selectionStart查找标记的结尾，我可以完成所有我想做的事情。 。何时停止增加/减少标记开始和结束的索引的条件可能有点复杂，因为它检查它是否超出textarea文本的开头/结尾，或者是否开始用“＃”，“@”或空格标记。在进行选择时替换文本使用几乎相同的过程来查找文本，然后用选定的标记替换文本。并在更换文本后设置光标，方法是将光标设置为标签的起始位置偏移所选标签的长度。