自动完成弹出文本区域

Question

我想在我的web应用程序中建立一个用户名自动完成功能，所以当你键入@符号时，带箭头的小弹出窗口出现在你的@符号处，并且在继续输入用户名并点击完成它）。

我可以做这个最，但我有越来越X和Y，我可以用它来定位酥料饼的一些坐标挣扎的主要部分...

仅供参考这里是一个的jsfiddle我拨弄我正在努力.. http://jsfiddle.net/tarnfeld/Xefdb/3/

为了使主要功能正常工作，我有一点红色的范围，我想移动到插入位置（小键符号作为您的输入），所以我可以进一步将其扩展为真棒自动完成的爱。

任何帮助，将不胜感激:)

谢谢！

PS：我发现这样Twitter-style autocomplete in textarea答案，但他们没有在@字符位置下方弹出...

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

WooHoo！

因此，具有一定的阅读和黑客攻击我得到这个工作..你可以在这里看看（请在顶部阅读邮件！）http://jsfiddle.net/Xefdb/9/

我没有带还没有尝试在IE浏览器，如果任何人可以，如果它不能正常工作，给我一个截图@tarnfeld，这将是真棒。

这里有一个快速的介绍它是如何工作的：

• 获取插入位置
• 复制可编辑的包装，并将其放置在同一个地方真正的可编辑的包装
• 总结你的角色只是在跨度
• 使用jQuery获得跨度绝对位置
• 删除重复的包装
• 写道：将您希望跟踪插入符号的元素定位在您刚制定的跨度的x/y处。

如果有人能找到一个更好的方法来做到这一点，请让我知道！

PS。它也应该处理滚动！