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.
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.
Rather than the default look of a select where the options drop down, the options now center on the selected option and popup.
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.
A selectgroup option group or an option of the selectgroup may be disabled or enabled using the widget's methods.
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.