Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 496
Chris Avatar asked Jan 18 '11 20:01

Chris


3 Answers

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" },     .     . }); 
like image 50
mohitp Avatar answered Sep 21 '22 14:09

mohitp


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"
});
like image 42
mvonlintel Avatar answered Sep 21 '22 14:09

mvonlintel


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);
}
like image 42
Chris Avatar answered Sep 23 '22 14:09

Chris