JQuery UI autocomplete: getting ul link

Question

I have 4 jQuery autocomplete text fields. I need to add some style to one specific autocomplete list.

The ul is added to the body with the ui-autocomplete . There is no link in which it will be indicated to which ul text field belongs.

So I need to add a style to the user interface after 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 several options such as open :, positon: etc. But none of them get ul-control for me to apply css style to it.

Please help me get a link to ul for one specific text field.

DOM structure: the text box is somewhere inside the <form>

Thanks in advance.

Answer 1

"ul is added to the body of the JQuery UI. We cannot control the DOM structure as to where ul is added. Updating the image of how my DOM is ... - Raghav 5 minutes ago" - you can actually influence when placeholder ul Jqueryui inserted:

Use the "appendTo" parameter when starting autocomplete. You have two empty divs in which the “standard” uls will be added, in which you have your own special ul style.

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

and then in your css, you can pre-specify the fantasy as

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

access your special list from jQuery:

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

Answer 2

You can add a CSS class to this ul having a ui-autocomplete class using:

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

The class "independently" applies to ul. see below img:

Answer 3

Ok, hopefully now I got you, so you want to style each item in the autocomplete list using dataFilter or formatItem

 $("#srchList").autocomplete( source: function (request, response) { $.ajax({ ..... dataFilter: function(data) { return "<span style='.....'>"+data+"</span>"; }, // or formatItem: function(data) { return "<span style='.....'>"+data+"</span>"; }, //something like this, you can change it as per your requirement. success: function (d) { }, ...... }); }, open: .... select : ..... ); 

Answer 4

  select: function(event, ui) { // that how get the menu reference: var widget = $(this).data('ui-autocomplete'), menu = widget.menu, $ul = menu.element, id = $ul.attr('id'); // or $ul[0].id } 

Answer 5

 $("#srchList").autocomplete({ source: ... }).autocomplete( "widget" ).addClass( "your_custom_class" );