Question

My jquery-UI autocompletes are broken when I switch from jquery-ui 1.9 to 1.10 (with jquery 1.8.3 in both cases).

The upgrade guide indicates that the item.autocomplete syntax is replaced by ui-autocomplete-item but I cannot get it to work. In fact I think the example for Custom data and display is broken as the desc is not displayed in the dropdown.

This may be very simple but I am blocked, an example would be very much appreciated, in particular one that would display HTML (like <strong>) correctly in the dropdown.

Answer 1

btr basically gave me the answer but for others here is what I had not understood:

As per the upgrade guide I had changed item.autocomplete to ui-autocomplete-item but I forgot to change autocomplete to ui-autocomplete.
So my (invalid) code looked like this (last part of my autocomplete call):

.data( "autocomplete" )._renderItem = function( ul, item ) {
    return jQuery( "<li>" ).data( "ui-autocomplete-item", item ).append( "<a>--" + item.label + "<br>" + item.desc + "</a>" ).appendTo( ul );

Note that I changed item.autocomplete to ui-autocomplete-item on line 2 but that I forgot to change autocomplete to ui-autocomplete on line 1

The equivalent working code is:

.data('ui-autocomplete')._renderItem = function(ul, item) {
        return jQuery('<li>').data('ui-autocomplete-item', item ).append('<a>--'+ item.label+'<br>'+item.desc+'</a>').appendTo(ul);
    };

Thanks again for the help btr!