CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Chris
Chris

Reputation: 1731

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?

Upvotes: 25

Views: 37080

Answers (4)

Chris
Chris

Reputation: 1731

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

Upvotes: 10

mvonlintel
mvonlintel

Reputation: 314

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

Upvotes: 17

mohitp
mohitp

Reputation: 1305

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" },
    .
    .
});

Upvotes: 33

Tsahi Asher
Tsahi Asher

Reputation: 1810

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.

Upvotes: 5

Related Questions