How to change rendering of dropdown in jquery ui autocomplete attached to a class?

Question

I copied some code from the jQuery UI site and appended it to my own:

$('.field_values') // class that all input fields are a member of in my html
// here I am skipping .autocomplete, which works
// next comes the copied code
.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
return $( '<li>' )
.append( '<a>' + item.label + '<br>' + item.value + '</a>' )
.appendTo( ul );
 }
;

I cannot find any documentation on this _renderItem function. Another stackoverflow question/answer suggested that the problem might be having a class instead of an id. But I must have a class, because there are many fields.

How can I get this to work with my class?

Answer 1

Look what I tried. It seems to work for me. I hope I understood your question right.

$(document).ready(function () {
    //...here is the projects source

    $(".field_values").autocomplete({
        source: projects,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                    .append('<a>' + item.label + '<br>' + item.value + '</a>')
                    .appendTo(ul);
            };
        }
    });
});

Here is a working example.

With your method it seems like the custom rendering only gets applied to the first autocomplete input you click but with the create event it gets applied to each autocomplete with the class .field_values when it's created.

Created this fiddle with jQuery v 1.9.3 and jQuery UI 1.10.3 (works fine too with UI 1.9.1)

Here's the source code of the _renderitem function on github.