type: widget

release: 1.11

status: released

documentation: http://api.jqueryui.com/selectmenu/

demo: http://jqueryui.com/selectmenu/

1 - Description:

A jQuery UI widget that duplicates and extends the functionality of a native HTML select element, allowing it to be customizable in behavior and appearance far beyond the limitations of a native select. For multiple selection, please use Multiselect Widget instead.

2 - Visual Design:

3 - Functional Specification:

Feature details:

• selectmenu will act as a proxy back to the original select element, controlling its state for form submission or serialization 
• Any form label originally associated with the select menu will be associated with the new form control, by forwarding the click event on the original select (as long as the label's for-attribute matches the select's id-attribute).
• The menu will support both in-place "popup" or drop-down styles
• The menu will be fully keyboard accessible using matching conventions to native select elements
• Closed
• cursor up: focus the previous item; if first item is focused, do nothing
• cursor down: focus the next item; if last item is focused, do nothing
• cursor left/right: same as up/down
• page up: focus the first item in the previous page
• page down: focus the first item in the next page 
• end: focus last item
• home: focus first item
• alt+cursor up/down: toggle the menu
• space: open the menu
• enter: does nothing (does not submit forms) 
• Opened        
• cursor up: focus the previous item; if first item is focused, do nothing
• cursor down: focus the next item; if last item is focused, do nothing
• cursor left/right: same as up/down
• page up: focus the first item in the previous page
• page down: focus the first item in the next page 
• end: focus last item
• home: focus first item 
• enter/space: select the currently focused item and close the menu 
• alt+cursor up/down: toggle the menu
• escape: close the menu
• The menu will have ARIA support for screenreaders so the original select element can safely be hidden from all users 
• The presentation menu is built based on labels and values of the wrapped select. Custom presentations are possible.
• The min-width of the menu is the width of the input.
• The max-height of the menu can be controlled via CSS, or, if necessary, via JS customizations  
• For render customizations, e.g., custom background images for each item, the widget provides _renderMenu() and _renderItem(), like autocomplete does. Users can override these, e.g., override _renderMenu() and use a template to output the markup.
• Type-ahead, as built-in into menu.
• Optgroup support just like native select does, with a flat list with group headers
• Optional: Render groups as nested lists, making each group a popup menu, with the top-level item the group's header
• Disabling individual options or optgroups happens by updating the original select, then calling the refresh() method on the widget. 
• While selectmenu updates the underlying select element, it doesn't trigger any events on that element, e.g., change. If other components rely on that event, you have to build the integration manually.

Not supported:

• Initializing from something that isn't a select-element.
• We should eventually look into other data sources, such as datalists and arrays.  

4 - Markup & Style:

(only used prior to implementation)

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/selectmenu/default.html

6 - Open issues being discussed

Tabled/deferred

• Should we have an option for scrollbarless slick scrolling (arrows at top and bottom and list scrolls dynamically with mouse position)?
• Should be an option of menu, not selectmenu. Not planned right now.   
• Mobile browser support: jQuery Mobile provides a good reference implementation for now, eventually we should be able to merge parts of both frameworks back together. 
• review below 
• Disabling menu's built-in wrapping might be interesting. Ignoring that for now. This was addressed 
• Figure out how to deal with empty optgroup elements. Currently not getting displayed.
• Popup style via an extension (see here)
  

jQuery Mobile compare

Differs from UI Selectmenu:

• Different modes: Open original option list or show custom menu
• Visual grouping of multiple selects
• A lot of built-in styling options
• Option setting works via attributes
• Placeholder functionality
• Multiple selection possible
• Almost no callbacks
• No positioning options

Issues in Mobile Selectmenu

• Not keyboard accessible (for non IE)
• Some critical cross browser issues (especially with the non native menu)
• Screenreader issues (quick test latest FF with NVDA)
• Native menu: button is never announced, menu works nice as its native
• Custom menu: button is sometimes announced correct, menu works pretty nice

Possible merge problems:

• Different handling of the native select (both native and custom menu)
• Handling of long (overflow) lists is not suitable for desktop applications
• Multiple selection was planned as a standalone widget for UI (Multiselect) as its a quite different usecase
• A lot of dependencies to other jQuery Mobile components