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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4728607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:50:15  来源:igfitidea点击:

Change jQuery UI Autocomplete Position - Pop up, instead of down

jqueryjquery-uiautocomplete

提问by Chris

I am placing an autocomplete box at the bottom of my page and I would like the results to pop up OVER the text box, instead of below. How can I do this?

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

采纳答案by Chris

Seems as if I've been able to answer my own question already. I'm open to a better solution if someones got it. I added this to the autocomplete start up.. essentially it repositions the box on open to a new offset.

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

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);
}

回答by mohitp

Putting @mvonlintel's answer in another way, set the suggestions menu position in the widget declaration:

以另一种方式将@mvonlintel 的答案放在小部件声明中设置建议菜单位置:

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

回答by mvonlintel

You can use the jQuery UI Position utility. Here is an example:

您可以使用 jQuery UI位置实用程序。下面是一个例子:

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

回答by Tsahi Asher

current version of jQuery UI allows giving the Autocomplete widget a position object with the options, with the same properties as the Position widget mentioned above. so you can use that to position the suggestions list as you like.

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