jQuery UI autocomplete: Getting reference to the ul

Question

I have 4 jQuery autocomplete textboxes. I need to add some style to one particular autocomplete list.

The ul is added to the body with the class ui-autocomplete. There is no link that would say which ul belongs to which textbox.

So i need to add the style to the UI after the Ajax Success or some option that comes with

$("#srchList").autocomplete(
 source: function (request, response) {
          $.ajax({  .....
                        success: function (d) {
                         },
                    ......
                 });
          },
 open: ....
 select : .....
).data('autocomplete')._renderItem = function (liObj, item) {
    //Position the Autocomplete dropdown. This is not working !!!
    //$(liObj).parent().css({ 'margin-left': '-18px' });

    //Style the dropdown Item. (this works. the li is returned as string to jQuery UI and is added by the jQuery UI to the ul)
    return $("<li class='dropItem'></li>")
          .data("item.autocomplete", item)
          .append($("<a></a>").html(item.label))
          .appendTo(liObj);
};

There are some options like open :, positon: etc. But none of them get the ul-control for me to apply the css style over it.

Please help me to get the reference to the ul for one particular textbox.

DOM Structure: The textbox is somewhere inside the <form>

Thanks in advance.

Answer 1

You can add CSS class to that ul having class 'ui-autocomplete' by using :

$( elem ).autocomplete({
    source: ...
}).autocomplete("widget").addClass("whatever"); 

Class 'whatever' get applied to ul. see below img: