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

Question

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?

Answer 1

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

Answer 2

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

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

Answer 3

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.

Answer 4

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

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