better-select
A progressively enhanced, lightweight, customizable, and accessible <select>
custom element with text input.
Features
Lightweight
A single file, weighing only 7KB (2.6KB gzip), and having no dependencies.
Accessible
Based on Adam Silver's article Building an accessible auto-complete control, and some improvements of my own.
Progressively enhanced
All you need to do is wrap your <select>
element inside a <better-select>
element, and the <select>
will be enhanced. If for some reason, your JavaScript fails to load (or until it loads), users will still be able to access a working <select>
menu. You don't need to change your forms input handling either.
Basic Usage
Select India Australia Japan
You can import better-select.js from CDNs like unpkg. The package is also available on npm.
Advanced Usage
Need to use some other name for custom element?
Styling?
The custom element can be styled using CSS custom properties. Following properties are presently available with along their default values:
/* input box */--/* focused/active input box */--/* options list wrapper */--/* options */--/* dropdown arrow */--);
Custom filter function
Method 1: Extend isMatch
method of BetterSelect
class:
; { super; } /** * @param * @param * @returns */ { return option; } customElements;
Method 2: Add a globally available function name as an attribute to the element
India <!-- … -->
Contributing
- Reporting issues is welcome.
- Sending pull requests is more welcome.