JQuery UI AutoFill formatting for multiple items

Question

I have a jQuery UI autocomplete setting to my taste and works fine, but there is one fatal flaw. In my autocomplete, I use a custom display like this example . I have something very similar, but with the exception ...

The only difference is that I have multiple autocomplete elements of the same class on the same page. Only the first element shows an additional row of data, the rest show only basic autocomplete.

I can get the desired result by simply repeating all these elements of the class and causing autocomplete on them, but I was hoping there was a better way to call it once and make it "just work".

This is how I add an extra line:

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

I should note that I am not getting any exceptions in the console at all.

Answer 1

The only way I can do this work is to change the code:

 addautocomplete($('.tagEntry')); 

To:

 $('.tagEntry').each(function() { addautocomplete(this); }); 

Answer 2

You just need to override the function with the prototype , not on a single copy .

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

Overwrite the function before activating any autocomplete, but after loading the script.

Answer 3

Alternatively:

 $(..).autocomplete(..).each(function () { $.data(this, "autocomplete")._renderItem = function (ul, item) { ... } })