textarea 的自动完成弹出窗口

Question

我正在尝试在我的 web 应用程序中构建用户名自动完成功能，因此当您输入 @ 符号时，会在您的 @ 符号处出现一个带有箭头的小弹出窗口，并在您继续输入用户名时过滤掉（并单击完成）。

我可以完成大部分工作，但是我正在努力解决的主要部分是在 x 和 y 中获取一些坐标，我可以使用这些坐标来定位弹出框...

这里是我正在研究的一个 JSFiddle Fiddle 供参考。http://jsfiddle.net/tarnfeld/Xefdb/3/

为了使主要功能正常工作，我有一个小的红色跨度，我想将它移到插入符号的位置（小 | 符号作为您的输入），以便我可以进一步扩展它以成为很棒的自动完成爱。

任何帮助将不胜感激:)

谢谢！！

PS：我找到了像Twitter-style autocomplete in textarea 这样的答案，但它们不会在@ char 位置下弹出...

Answer 1

这似乎很复杂。基本上，您必须获取当前 字符 位置并将其转换为 X/Y 坐标。

我发现以下链接可能对您有所帮助：

• Caret position in textarea, in characters from the start
• Display DIV at Cursor Position in Textarea
• http://kirblog.idetalk.com/2010/03/calculating-cursor-position-in-textarea.html

计算 x/y 位置是棘手的部分。两种解决方案（第二个和第三个链接）都会创建临时元素（<div> 或 <textarea>）并用计算其高度/宽度的文本连续填充它们。

HTH。

Answer 2

呜呼！

所以，通过一些阅读和破解，我得到了这个工作.. 你可以看看这里（请阅读顶部的消息！）http://jsfiddle.net/Xefdb/9/

我还没有在 IE 中尝试过，所以如果有人可以，如果它不能正常工作，请给我发一张截图@tarnfeld，那会很棒。

以下是其工作原理的简要介绍：

• 获取插入符号位置
• 复制可编辑包装器并将其放置在与真正的可编辑包装器相同的位置
• 把你刚刚写的字符换成一个span
• 使用 jQuery 获取 spans 的绝对位置
• 删除重复的包装器
• 将您希望跟踪插入符号的元素放置在您刚刚计算出的跨度的 x/y 处。

如果有人能找到更好的方法，请告诉我！

PS。它也应该处理滚动！