我正在尝试在我的网络应用程序中构建一个用户名自动完成功能,因此当您键入 @
符号时,会出现一个带有箭头的小弹出窗口指向您的 @
符号,它在您继续键入用户名时进行过滤(并单击完成)。
我可以完成其中的大部分工作,但是我遇到的主要问题是在 x 和 y 中获取一些坐标,我可以使用这些坐标来定位弹出框...
这里是我正在研究的 JSFiddle Fiddle 的引用。http://jsfiddle.net/tarnfeld/Xefdb/3/
为了让主要功能正常工作,我有一个小的红色范围,我想将其移动到插入符号位置(小 | 符号作为您的输入),这样我就可以进一步扩展它,使其成为令人敬畏的自动完成爱。
任何帮助将不胜感激:)
谢谢!!
PS:我找到了这样的答案Twitter-style autocomplete in textarea但它们不会在@char 位置下弹出...
最佳答案
这看起来很复杂。基本上,您必须获取当前字符 位置并将其转换为 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.
关于jquery - 文本区域的自动完成弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7695853/