Question

Currently, Autocomplete result box is aligned to the left edge of my input box and spread towards the right by as much width as I give it. However, my business requirement is to align it to the right edge of the input box and spread it in the reverse direction if the input box is placed on the righter side of the page since result gets cut out and horizontal scroll is get added to view the complete result. (I am ok to modify my ‘jquery-ui.css’)

can anybody help in this?

Answer 1

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.

see here http://jqueryui.com/demos/autocomplete/#option-position

if you need change position dynamicaly – you need to use “open” event

Code examples

//Supply a callback function to handle the open event as an init option.
$( ".selector" ).autocomplete({
   open: function(event, ui) { ... }
});
//Bind to the open event by type: autocompleteopen.
$( ".selector" ).bind( "autocompleteopen", function(event, ui) {
  ...
});

inside them you can change position of autocomplie form within css()

$('.ui-autocomplete').css({ 'left': x + 'px', 'top': y + 'px' });

PS: I am not shure that you can achieve within using only css, as position depend on parent html input field