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          


        

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.

Answer 2

.autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };

This is how it works for me.