JQuery 自动完成下拉菜单未在预期位置显示

Question

我实现了一个面板，用户可以在其中 post 用图像表达他们的想法。对于每个 post 都有一个类似于 facebook 时间轴的回复框。用户可以在回复任何 post 时提及任何用户，我试图让这一提及更容易。我使用 JQuery UI(JS 和 CSS) 自动完成下拉菜单在 @ 符号和 其他一些时建议用户名输入字母 （类似于 FB 或 Skype）。正如预期的那样，回复框是动态生成的。我制作了一个自动完成下拉列表并将其附加到一个获得焦点的回复框。为此，我使用这个函数来设置 position -

$("#hidden-autocomplete").autocomplete("option", "position", { of: "#" + currentReplyBoxId } );

除下拉位置外，一切正常。下拉菜单出现在输入字段上方，因此用户看不到他目前输入的内容。看图-

Here 我做了一个可重现的例子。

但我想要像下面这样的 -

现在下拉菜单位于输入字段下方，高度固定且可滚动。难道我做错了什么？你能帮我得到想要的结果吗？ TIA

Answer 1

看起来您需要设置所有 3 个 jQuery UI 位置属性：

my: "left top",
at: "left bottom",
of: "#" + currentId

这是工作fiddlehttps://jsfiddle.net/yg5sdxw6/2/

JQuery 自动完成下拉菜单未在预期位置显示

JQuery autocomplete dropdown not showing at expected place

jquery-ui

jquery-ui-autocomplete