Previously, we discussed a method to improve on HTML multiple select elements. The result allows the user to select multiple items from a <select> element without having to hold down Ctrl. It also allowed filtering the list of choices to avoid scroll fatigue.
We realized that regular dropdown elements would also benefit from this filtering technique, specially when their list of options is fairly long, a reality that is not always avoidable. Combining an editable text input with a dropdown element results in a UI element commonly known as a combobox.
Functional requirements#
We want to distinguish our combobox from the generic one in one important way: the list of choices is not just a recommendation, but a requirement for the element. That means that the value ultimately chosen, whether it was typed or selected, must be one of the original <options>s in the <select> element. The generic (free-value) combobox can be emulated with off-the-shelf components in HTML5 by taking advantage of the new <datalist> element.
But since there is no existing HTML element for the restricted version of the combobox, we set out to create our own by using Javascript. This ensures that the element degrades gracefully for users who do not have Javascript available and enabled.
Demo#
Below is a demonstration of our combobox in action.
View the demo as a standalone document.
How comboboxes work#
Visually, our combobox replaces the display section of a collapsed <select> element with an editable text input field, which we call the filter. The arrow usually displayed to the right continues to toggle the list of options for the combobox, allowing the user to use it in the same manner as a regular dropdown.
Typing in the filter expands the list of options, narrowed down to the items that match the entered text. The user can use the down (↓) arrow at any point to scroll through the list of recommended options, and press Enter (or click) to select it.
If at any point, the filter text does not match any options, a visual cue indicates that the value is invalid. Once the element loses focus, the value is checked against the list of possible elements in a process called validation. If the value is determined to be invalid, the filter and the underlying <select> element revert back to the last valid choice.
Extending the code#
We have written the combobox code to be easy to implement and extend. Provide your own functionality by tweaking the different methods of the OWSComboboxSelect class directly.
Want the filter text to match anywhere in the option value? Tweak the filter method. Want to add an aural cue to the validation process? Look in the validate function instead. As always, feel free to use and extend the cselect.js file, but don't forget to provide proper attribution.
Tips for usage#
The OWSComcoboxSelect class provided in the cselect.js script will convert a given (non-multiple) HTMLSelectElement into a fancy combobox. We find that these are useful when the list of options is long, so in our load function we only convert a select element if its list of options exceeds a threshold amount.
Feel free to use classList or HTML5's dataset functionality to identify the elements that would benefit from combobox functionality.
Use your own stylesheets to customize the look and feel of the comboboxes. We employ the .csel- classname prefix for easy CSS targeting. And feel free to spread the word!
Continue the discussion on Twitter. Follow @OpenWebSolns