@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