@duskmoon-dev/el-autocomplete
An input component with autocomplete suggestions built with Web Components.
Installation
bun add @duskmoon-dev/el-autocomplete
Usage
Auto-Register
import '@duskmoon-dev/el-autocomplete/register';
<el-dm-autocomplete placeholder="Search..."></el-dm-autocomplete>
Manual Registration
import { ElDmAutocomplete, register } from '@duskmoon-dev/el-autocomplete';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-autocomplete', ElDmAutocomplete);
Setting Options via JavaScript
const autocomplete = document.querySelector('el-dm-autocomplete');
autocomplete.options = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
];
Sizes
| Size | Description |
|---|
sm | Small input |
md | Medium input (default) |
lg | Large input |
Attributes
| Attribute | Type | Default | Description |
|---|
value | string | '' | Current value |
placeholder | string | '' | Placeholder text |
disabled | boolean | false | Disable the input |
multiple | boolean | false | Allow multiple selections |
clearable | boolean | false | Show clear button |
size | string | 'md' | Size variant: sm, md, lg |
loading | boolean | false | Show loading state |
no-results-text | string | 'No results' | Text when no results |
Events
| Event | Detail | Description |
|---|
change | { value } | Fired when value changes |
input | { value } | Fired during typing |
clear | - | Fired when cleared |
Examples
Basic
<el-dm-autocomplete placeholder="Search fruits..."></el-dm-autocomplete>
<script>
const ac = document.querySelector('el-dm-autocomplete');
ac.options = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
];
</script>
Clearable
<el-dm-autocomplete clearable></el-dm-autocomplete>
Multiple Selection
<el-dm-autocomplete multiple></el-dm-autocomplete>
Custom No Results Text
<el-dm-autocomplete no-results-text="Nothing found"></el-dm-autocomplete>
With Loading State
const ac = document.querySelector('el-dm-autocomplete');
ac.addEventListener('input', async (e) => {
ac.loading = true;
const results = await fetchSuggestions(e.detail.value);
ac.options = results;
ac.loading = false;
});
License
MIT