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

    and then position it under the input box that triggered it. Unfortunately, I can't find any unique identifiers in this generated
      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

        and matching different autocomplete box widths with the values inside the list doesn't work either, since the values are dynamically generated.

        Any ideas?

        25
        задан Community 23 May 2017 в 11:45
        поделиться