JQuery UI AutoComplete Position

Question

I'd like to position my autocomplete (menu) properly in relation to the browser window. That is, when the autocomplete is at the top of the page get the menu going down and if at the bottom of the page get the menu going up (even if we have some vertical scrollbar).

Thx.

Answer 1

Use the position option to activate collision detection:

$( "#someElement" ).autocomplete({
    source: [...]
    position: {  collision: "flip"  }
});​

DEMO

The autocomplete uses the jQuery UI Position utility to easily place the menu relatively to the input element.

The option collision to automatically move the element to an alternative position in case the element would not be viewable in the default direction in the viewport.

The value flip will show the menu below or above, in the direction is will be fully viewable.