jQuery autocomplete gives TypeError: this._renderItem(...) is undefined -

i'm using .data( "ui-autocomplete" )._renderitem = function( ul, item ) in 3 places in page. need add 1 more , i'm done.

but time error message

typeerror: this._renderitem(...) undefined

the strange thing if if test false.

 .data( "ui-autocomplete" )._renderitem = function( ul, item ) {    // if 1 row returned , id = 0, return 'no result' message   if(item.id == '0') {     return jquery( "<li></li>" )         .data( "item.autocomplete", item )         .append( "<div class='no-result'>"+ item.value + "</div>" )         .appendto( ul );   } 

i can't figure out why it's failing here, , not in other 3 places. there conflict somewhere?

this code

jquery('#my-selector').autocomplete({   minlength: 2,   source: function( request, response ) {     jquery.ajax({         url: callback_url,         datatype: "json",         data: {                 term: request.term         },         success: function( data ) {           response( jquery.map( data, function( item ) {             return {               id: item.id,               value: item.name,               name_encoded: item.name_encoded             }         }));       }     });   },   select: function( event, ui ) {         return false;   } }).data( "ui-autocomplete" )._renderitem = function( ul, item ) {   if(item.id == '0') {     return jquery( "<li></li>" )         .data( "item.autocomplete", item )         .append( "<div class='no-result'>"+ item.value + "</div>" )         .appendto( ul );   } }; 

update

this change works. still don't understand why must use else statement here, when i'm not using in 2 other autocomplete functions.

.data( "ui-autocomplete" )._renderitemdata = function( ul, item ) {         if(item.id == '0') {                 return jquery( "<li></li>" )                         .data( "item.autocomplete", item )                         .append( "<div class='no-result'>"+ item.value + "</div>" )                         .appendto( ul );         } else {             return this._renderitem( ul, item ).data( "ui-autocomplete-item", item );         }  }; 

return data query search term some

[   {"id":"8186","name":"some thieves"},   {"id":"6149","name":"somet"},   {"id":"6150","name":"somethin'else skechers"} ] 

it because of test, if test fails _renderitem not return value equivalent returning undefined.

but _renderitem called given below, causes error since jquery attempts set data value returned value.

return this._renderitem( ul, item ).data( "ui-autocomplete-item", item ); 

in case have to, override _renderitemdata instead of _renderitem

var el = $('<my-autocomplete-element>'); var _renderitemdata = el.data("ui-autocomplete")._renderitemdata; el.data("ui-autocomplete")._renderitemdata = function(ul, item) {      // if 1 row returned , id = 0, return 'no result' message     if (item.id == '0') {         return jquery("<li></li>").data("item.autocomplete", item).data(                 "ui-autocomplete-item", item).append("<div class='no-result'>"                 + item.value + "</div>").appendto(ul);     } else {         _renderitemdata.apply(this, arguments)     } } 

demo: plunker