CamelBlues CamelBlues - 1 month ago 12
CSS Question

Changing width of jquery-ui autocomplete widgets individually

I'm working with mutiple jquery-ui autocomplete widgets on one page and want to be able to set the widths of each one individually. Currently, I'm doing it like this:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);


Which isn't really a solution since the user is able to trigger various autocompletes in different orders, and this code just styles them based on the order they are added to the DOM.

When autocomplete is triggered, it seems to create a
<ul>
and then position it under the input box that triggered it. Unfortunately, I can't find any unique identifiers in this generated
<ul>
to latch on to and apply some CSS.

My issue is different from this one, since I'm using just the default autocomplete, and not the autocomplete-combobox.

Also, digging into the autocomplete
<ul>
and matching different autocomplete box widths with the values inside the list doesn't work either, since the values are dynamically generated.

Any ideas?

Answer

I resolved this issue using the 'open' event available. I needed a way to dynamically set the width, along with other items and did not want extra markup.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});