文本区域选择器javascript jquery的自动完成中间

Question

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

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

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

Answer 1

我实际上正在实现一些非常相似的东西。我查看了 Google+，他们在 Chrome 中使用 contenteditable，在 Firefox 中使用一些 iframe hybrid。

我通过rangy 获得了当前选择，取得了一定的成功。

我还没有解决的问题：

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

Answer 2

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