How to use jquery-ui selectmenu extension methods(_renderItem, _renderMenu etc)

Question

The JQuery-UI selectmenu widget has some extension methods that can be used to customize rendering/styling of the dropdown select menu. From the api docs , the following widget extension methods can be used to customize the menu: - _renderItem( ul, item ) - _renderMenu( ul, items )

What i want to achieve is, overriding the above extension methods for just one instance of the selectmenu widget, and not at a global level. The widget factory docs does have example about extending a particular instance of a widget(example is at the bottom of this page), but haven't had any success in applying that to the selectmenu extension methods. Any insight for this issue is much appreciated.

Answer 1

Ah, found the way to use the extension methods. Here is an example:

$('select-menu-id').selectmenu(options).data("ui-selectmenu")._renderItem = function(event, ui) {
  // override with custom logic for rendering each select option
}

Used the way autocomplete widget was customized by @Ben Olson in this article: Customize the jQuery UI AutoComplete Drop Down Select Menu

Answer 2

Rather than use .data('ui-selectmenu') to gain access to the object (as suggested in the answer by @kashif_shamaz), the API provides the instance() method to expose the object. The benefit is that this method is part of the API, and thus should be more stable and better-documented during potential future changes, compared to string-based access via the data() method.

Use as follows:

$('#select-menu-id').selectmenu('instance')._renderItem = function(event, ui) {
    // override with custom logic for rendering each select option
}

Answer 3

For jQuery UI novices like me, an expansion of the answer from @tmpearce. For a <select> input element:

<select id="foo">...</select>

The selectmenu widget must be created before you can call the instance method on it. You can chain together the creation and access of the instance.

$( '#foo' ).selectmenu().selectmenu( 'instance' )._renderItem = function( ul, item )
{
  ...
};

Or, you can create the selectmenu widget, do other stuff, then access the instance.

$( '#foo' ).selectmenu();

...

$( '#foo' ).selectmenu( 'instance' )._renderItem = function( ul, item )
{
  ...
};

Or, my favorite, store the instance in a variable so that I do not have to specify the query selector more than once.

var menu = $( "#foo" ).selectmenu().selectmenu( 'instance' );

...

menu._renderItem = function( ul, item )
{
  ...
};

Vide:

• https://api.jqueryui.com/selectmenu/#method-_renderItem
• https://api.jqueryui.com/selectmenu/#method-instance