Showing first two lines in the button label when address formatting

[WebDevTX]

How can I get the first two lines (name and address1) of the address to appear in the button label but while maintaining the address multiline format in the menu?

ui-selectmenu-item-header is obviously used for the button label, but I cant figure out how to get the first two lines in there w/o loosing the newline for the address.

I'd like it to look like this:

Button:
[ John Doe - 123 Main Street, Suite 100 ]

Menu:
| John Doe
| 123 Main Street, Suite 100
| Somewhere, US 12345
| (footer text)

But so far, I can only manage this (by matching on the first | instead of -):

Button:
[ John Doe - 123 Main Street, Suite 100 ]

Menu:
| John Doe - 123 Main Street, Suite 100
| Somewhere, US 12345
| (footer text)

Or, the normal:

Button:
[ John Doe ]

Menu:
| John Doe
| 123 Main Street, Suite 100
| Somewhere, US 12345
| (footer text)

John Doe could have multiple addresses, and only showing the name in the button doesn't provide enough feedback for what was/is selected

Thanks!

[fnagel]

Which Selectmenu widget do you want to address? The official one or the old, legacy one within this repo?

[WebDevTX]

Make that the official jQ one - thanks to izaa!!

[izaa]

Implement options like this

<option data-lines="John Doe # 123 Main Street, Suite 100 | Somewhere, US 12345 (footer text)" value="VAL1">John Doe - 123 Main Street, Suite 100</option>

and create your own widget like this

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

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

[WebDevTX]

You rock! Thanks! :D

[WebDevTX]

NM :)