Force jQuery UI autocomplete to move?

Question

I'm using autocomplete from jQuery UI on my website, and it's working fine, but I'm redesigning the system, so I need to make this one change. Currently, the autocomplete opens on the bottom of the input. However, I can't force it to a custom position, neither with jQuery or CSS.

I've tried this:

    $('#search').autocomplete('widget').css({
        'margin-left': -200
        //or
        left: 200
    });

I also tried adding !important to tthe rules but no affect.

I've also tried to add css to .ui-autocomplete, without any result.

It seems that when the box opens, it overwrites all these changes. Any idea about this? I'm really in need of a solution.

Thanks, Martti Laine

Answer 1

You can provide an optional function for open() to do this:

Example:

 $("#search").autocomplete({ 
                            open: function(event, ui) 
                                  {$(this).next().css('left',
                                    function(index, value) {return 200+parseInt(value)});
                                  }
    });

...will set the position to 200px left of the position it would have been normally

Answer 2

My autocomplete opens at the end of the DOM. Not close at all to the trigger input... I'm thinking of looking at the index of triggering input, and then finding the autocomplete's corresponding index, but i don't know why- its seems not robust enough for me.

Answer 3

Like NeoSwf, I found that my autocomplete was being inserted near the bottom of the DOM. Depending on $(this).next() to find it is fragile. Instead of this, I recommend using something more specific like 'ul.ui-autocomplete'. Here's the CoffeeScript for my version:

jQuery ->
  $('#search').autocomplete
    open: (event, ui) ->
      $('ul.ui-autocomplete').css('left', (index, value) ->
        return 200 + parseInt(value))