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