Force jQuery UI autocomplete to move?

Question

Hey

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

I struggle to understand the actual Problem. Could you provide the source file?

Answer 2

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