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

“the ul is added to the body by Jquery UI. We cannot control the DOM structure as to where the ul is added. Updating an image of how my DOM is… – Raghav 5 mins ago” – you actually can influence where the placeholder ul is inserted by Jqueryui:

Use the “appendTo” option when initiating the autocompletes.
Have two empty divs, one where “standard” uls will be appended, one where you have your special style ul.

$(".the-standards").autocomplete({ appendTo: "#someStandardDiv" });
$(".your-special-autocomplete").autocomplete({ appendTo: "#someSpecialDiv" });

and then in your css, you can pre-specify fancyness like

#someSpecialDiv .ui-autocomplete { border: 1px solid red !important };

of access your special listing from jQuery by:

$('#someSpecialDiv .ui-autocomplete').css('border', '1px solid red');