amiawizard amiawizard - 2 months ago 21
Javascript Question

Override both _renderItem and _renderMenu

How can I override _renderItem for only

#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

Remember that you can address the particular instance of the widget created by jQuery UI factory method (_create) via data:

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

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

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

Thus you're able to override its methods with your own:

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 );
  });
};