jQuery UI Selectgroup

Examples of the custom select widget created for the jQuery UI library. The widget uses the flyweight pattern, further information can be found on the GitHub wiki page.

Default example.

The original select element is hidden and a new placeholder element is attached to the DOM after the original select element. The select element's label is renamed to point at the new element.

Selected option and option groups are initially derived from the original select element.

Popup example.

Rather than the default look of a select where the options drop down, the options now center on the selected option and popup.

Disabled states.

When the widget is initialised it will test for the disabled attribute on options and option groups and apply the same attribute to the new placeholder element.

Disable/enable methods.

A selectgroup option group or an option of the selectgroup may be disabled or enabled using the widget's methods.

Disable or enable the select.

Disable or enable the select option.

Disable or enable the select option group.

Type ahead example.

The user may chose to navigate the selectgroup using alpha-numeric keys available on the keypad. When a character is selected the selectgroup will navigate to the first instance of the first character in the group. There is a 1 second timeout set that will clear the character selection.

A second character selected before the timeout will be appended to the original character and a new search will be made. This can be n characters before the timeout. If after the timeout the same character is selected again this will incrementally navigate down the group of available first characters. If the end of the available first characters is reached the selection will return to the initial first character. A new first character and additional characters can be chosen at any time.

This matches the functionality available in the original select element.