Override both _renderItem and _renderMenu

Question

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

Both, I have it working like so: $.ui.autocomplete.prototype._renderMenu = ... and ..._renderItem BUT I have multiple AC's on the page and only want one of them to have their functions overridden. — el_pup_le, Dec 28 '12 at 16:38
Then I suppose it's better to follow the approach I've shown in my answer. You can define some generic functionality in your own methods, then override it with instance methods. — raina77ow, Dec 28 '12 at 16:40
Please help on the following issue http://stackoverflow.com/q/33278419/5176876 — bharath, Oct 22 '15 at 10:10

raina77ow · Accepted Answer · 2016-09-29T16:23:04.230

14

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

edited Sep 29 '16 at 16:23

answered Dec 28 '12 at 16:36

raina77ow

103,633
15
192
229

1

The last line of the widgetInst.renderMenu should be changed from "});" to "};" (sorry, I would have edited it myself, but SO has a horrible policy of requiring 6 characters or more for an edit) – Michael Jul 12 '14 at 13:32
1

Hello, this solution still working ? I try it with no sucess – FolabiAhn Sep 29 '16 at 12:45
1

@user Which version of jQuery UI is used, and what exactly is 'no success'? – raina77ow Sep 29 '16 at 16:23
@raina77ow, I find a solution. It depends on the jQuery UI version i'm using, like you are asking me here. Instead of writting `.data('ui-autocomplete')` i have to write `.data('autocomplete')`. Notice the absence of characters **ui-** in my own. Thanks anyway guy – FolabiAhn Sep 30 '16 at 07:45
If memory serves me well, that was the way ('autocomplete') this answer was written originally - but someone has told me that newest version switched to the prefixed call. It was about 4 years ago, so I'm afraid, all that means you're using way too old version of jQuery UI. ) – raina77ow Sep 30 '16 at 11:09

score 0 · Answer 2 · answered Dec 28 '12 at 16:29

You have a couple of options:

You can override the _renderItem function so that it does some object comparison internally and either calls the original _renderItem function or executes your custom code.
You can create a new widget that inherits from autocomplete and override the functions there.

Override both _renderItem and _renderMenu

2 Answers2

Linked