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?
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" },     .     . }); 
                        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"
});
                        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);
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With