1

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.

Sébastien
  • 11,860
  • 11
  • 58
  • 78
  • 1
    Look here : http://stackoverflow.com/questions/9513251/cannot-set-property-renderitem-of-undefined-jquery-ui-autocomplete-with-html/14443936#14443936 – btr Jan 25 '13 at 09:26
  • Brilliant, thank you so much, I wish I could give your the rep... If you answer (instead of comment) I'll + you. – Sébastien Jan 25 '13 at 14:27

1 Answers1

7

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!

Sébastien
  • 11,860
  • 11
  • 58
  • 78