https://github.com/sidvishnoi/better-select
progressively enhanced select auto-complete
https://github.com/sidvishnoi/better-select
autocomplete custom-elements html-select input progressive-enhancement select
Last synced: 4 months ago
JSON representation
progressively enhanced select auto-complete
- Host: GitHub
- URL: https://github.com/sidvishnoi/better-select
- Owner: sidvishnoi
- License: mit
- Created: 2020-02-21T13:45:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-19T12:42:52.000Z (over 2 years ago)
- Last Synced: 2025-08-24T13:53:37.924Z (10 months ago)
- Topics: autocomplete, custom-elements, html-select, input, progressive-enhancement, select
- Language: TypeScript
- Homepage: https://sidvishnoi.github.io/better-select/
- Size: 22.5 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# better-select
A progressively enhanced, lightweight, customizable, and accessible `` custom element with text input.
## Features
### Lightweight
A single file, weighing only  , and having no dependencies.
### Accessible
Based on Adam Silver's article [Building an accessible auto-complete control](https://adamsilver.io/articles/building-an-accessible-autocomplete-control/), and some improvements of my own.
### Progressively enhanced
All you need to do is wrap your `` element inside a `` element, and the `` 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 `` menu. You don't need to change your forms input handling either.
## Basic Usage
```html
Select
India
Australia
Japan
```
You can import better-select.js from CDNs like [unpkg](https://unpkg.com/better-select/better-select.js). The package is also available on [npm](https://www.npmjs.com/package/better-select).
## Advanced Usage
### Need to use some other name for custom element?
```html
import BetterSelect from "./better-select.js";
customElements.define("my-better-select", BetterSelect);
```
### Styling?
The custom element can be styled using CSS custom properties. Following properties are presently available along with their default values:
```css
better-select {
/* input box */
--input-color: #000;
--input-background: #fff;
--input-border-width: 2px;
--input-border-color: #718096;
/* focused/active input box */
--outline-width: 3px;
--outline-color: #ecc94b;
/* options list wrapper */
--menu-max-height: 16em;
--menu-background: var(--input-background);
/* options */
--item-padding: 0.5em;
--item-color: #000;
--item-background: #fff;
--item-color-active: #fff;
--item-background-active: #111;
/* dropdown arrow */
--caret-color: var(--input-color);
}
```
### Custom filter function
**Method 1:** Extend `isMatch` method of `BetterSelect` class:
```js
import BetterSelect from "./better-select.js";
class MyBetterSelect extends BetterSelect {
constructor() {
super();
}
/**
* @param {HTMLOptionElement} option an option from select element
* @param {string} value the value user has typed
* @returns {boolean} whether this option be listed or not
*/
isMatch(option, value) {
return option.getAttribute("data-value").startsWith(value);
}
}
customElements.define("my-better-select", MyBetterSelect);
```
**Method 2:** Add a globally available function name as an attribute to the element
```html
India
function myMatcherFunction(option, value) {
return option.value.startsWith(value);
}
```
## Contributing
- Reporting issues is welcome.
- Sending pull requests is more welcome.