Announcement: Selectmenu is now part of jQuery UI

[fnagel]

Selectmenu is an official jQuery UI widget since version 1.11.0, see http://blog.jqueryui.com/2014/06/jquery-ui-1-11-0/

Reference #140

[WebDevTX]

I'm sorry, but was the option formatting stripped from the jQ UI version? I cant seem to figure out how to do the address format that was simple with your original plugin.

[fnagel]

Yes, that option was removed but custom styling is easy possible using extension points, see http://jqueryui.com/selectmenu/#custom_render

[WebDevTX]

Thanks! I saw that. But I cant seem to figure out how to get your addressformatting regex function to fire via the widget/_renderMenu. I'm basically trying to duplicate the "format: addressFormatting" functionality with the jQ version. I'm a backend'r, but I'll figure it out eventually....

[izaa]

Hi WebDevTX,

it's easy to implement. Something like this:

<select id="myselectmenu">
<option data-lines="line 1 | line 2 | line 3 | line 4" value="VAL1">VAL1 - the lines</option>
<option data-lines="line 1 | line 2 | line 3 | line 4" value="VAL2">VAL2 - the lines</option>
</select>

var addressFormatting = function(text) {
    var newText = text;

    var findreps = [
        {find: /^([^\#]+) \# /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
        {find: /([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find: /([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
        {find: /([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find: /(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
    ];
    for (var i in findreps) {
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}

$.widget("custom.multilinemenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
        var li = $("<li>", {html: addressFormatting(item.label+' # '+item.element.attr('data-lines'))});
        return li.appendTo(ul);
    }
});

$("#myselectmenu").multilinemenu() .multilinemenu( "menuWidget" ).css('height', '200px' );

[fnagel]

Nice, glad you made it! Thanks for posting it here so anyone can profit!

[WebDevTX]

Thanks izaa! I spent many hours trying to figure that out but just gave up and went back to the older Selectmenu. Your code works great.

To keeps things really interesting, you have any idea if/how the question below could be implemented with your code?

https://github.com/fnagel/jquery-ui/issues/345

Truly appreciate your help!

[vincentwansink]

Were the style, menuwidth and format options also dropped? If so, how do I port my old code over to the new jquery ui to work the same as it used to?

$('#myselect').selectmenu({
  style:'popup',
  width:'calc(100% - 1px)',
  menuWidth:220,
  format:multiLine
})