Override both _renderItem and _renderMenu

Question

How can I override _renderItem only for #global-search ?

 $("#global-search").autocomplete({ // })._renderMenu = function(ul, items) { var self = this; ul.append('<table class="ac-search-table"></table>'); $.each( items, function( index, item ) { self._renderItem( ul.find("table"), item ); }); }); 

Answer 1

Remember that you can refer to a specific instance of the widget created by the jQuery UI factory ( _create ) method using data :

 var widgetInst = $("#global-search").autocomplete({}).data('ui-autocomplete'); 

... or, since jQuery UI 1.12, through instance () a helper method:

 var widgetInst = $("#global-search").autocomplete('instance'); 

So you can override your methods with yours:

 widgetInst._renderMenu = function(ul, items) { var self = this; ul.append('<table class="ac-search-table"></table>'); $.each( items, function( index, item ) { self._renderItem( ul.find("table"), item ); }); }; 

Answer 2

You have several options:

• You can override the _renderItem function to perform any comparison of objects inside, and either _renderItem original _renderItem function or execute your own code.

• You can create a new widget that inherits from autocomplete and override functions there.