更改 jQuery UI 自动完成位置 - 弹出，而不是向下答案

【问题标题】：Change jQuery UI Autocomplete Position - Pop up, instead of down更改 jQuery UI 自动完成位置 - 弹出，而不是向下
【发布时间】：2011-06-11 08:18:24
【问题描述】：

我在页面底部放置了一个自动完成框，我希望结果在文本框上方而不是下方弹出。我怎样才能做到这一点？

【问题讨论】：

这里也可以参考一个非常相似的问题stackoverflow.com/q/9603998

标签： jquery jquery-ui autocomplete

【解决方案1】：

把@mvonlintel 的回答换一种方式，在小部件声明中设置建议菜单位置：

$('selector').autocomplete(
{
    position: { my: "left bottom", at: "left top", collision: "flip" },
    .
    .
});

【讨论】：

不错；谢谢。当 Chrome 通过忽略您告诉它不使用自己的自动完成的任何内容来破坏关键表单元素功能时的绝佳选择。

【解决方案2】：

您可以使用 jQuery UI Position utility。这是一个例子：

$(".ui-autocomplete").position({
    my: "left bottom",
    at: "left top",
    of: $("#quick_add"),
    collision: "flip flip"
});

【讨论】：

本例中的$("#quick_add") 是什么？是自动完成框还是别的什么？

【解决方案3】：

似乎我已经能够回答我自己的问题了。如果有人得到它，我愿意接受更好的解决方案。我将此添加到自动完成启动中.. 本质上它将打开的框重新定位到新的偏移量。

open: function(event, ui) {
    var autocomplete = $(".ui-autocomplete");
    var oldTop = autocomplete.offset().top;
    var newTop = oldTop - autocomplete.height() - $("#quick_add").height() - 10;

    autocomplete.css("top", newTop);
}

【讨论】：

如果函数中没有使用 event 和 ui 参数，则不需要使用。此外，如果您调整窗口大小，它也不起作用。您可以使用 F12 开发工具对其进行测试。
终于找到了我需要的东西

【解决方案4】：

当前版本的 jQuery UI 允许为 Autocomplete 小部件提供带有选项的位置对象，具有与上述位置小部件相同的属性。这样您就可以根据需要使用它来定位建议列表。

【讨论】：

我同意 .. 最好将其作为选项