Autocomplete

The Autocomplete component provides a searchable dropdown with filtering, option descriptions, and multi-select support.

Installation

npm install @duskmoon-dev/el-autocomplete

Usage

import '@duskmoon-dev/el-autocomplete/register';
<el-dm-autocomplete
  placeholder="Select a fruit..."
  options='[{"value":"apple","label":"Apple"},{"value":"banana","label":"Banana"}]'
></el-dm-autocomplete>

Live Demo

Basic Autocomplete

Properties

PropertyTypeDefaultDescription
valuestring''Selected value(s)
optionsstring'[]'JSON array of options
multiplebooleanfalseEnable multi-select
disabledbooleanfalseDisables the autocomplete
clearablebooleanfalseShow clear button
placeholderstring''Placeholder text
size'sm' | 'md' | 'lg''md'Size variant
loadingbooleanfalseShow loading state
no-results-textstring'No results found'Text for empty results

Option Format

Options should be a JSON array with the following structure:

interface AutocompleteOption {
  value: string;      // Unique value
  label: string;      // Display text
  description?: string; // Optional description
  disabled?: boolean;  // Disable this option
  group?: string;      // Group name for grouping
}

With Descriptions

Options with Descriptions

<el-dm-autocomplete
  placeholder="Select a framework..."
  options='[{"value":"react","label":"React","description":"A JavaScript library..."}]'
></el-dm-autocomplete>

Multiple Selection

Multiple Selection

<el-dm-autocomplete
  multiple
  placeholder="Select languages..."
  options='[...]'
></el-dm-autocomplete>

Clearable

Clearable

<el-dm-autocomplete clearable placeholder="Select and clear..." options='[...]'></el-dm-autocomplete>

Sizes

Autocomplete Sizes

<el-dm-autocomplete size="sm" placeholder="Small..." options='[...]'></el-dm-autocomplete>
<el-dm-autocomplete size="md" placeholder="Medium..." options='[...]'></el-dm-autocomplete>
<el-dm-autocomplete size="lg" placeholder="Large..." options='[...]'></el-dm-autocomplete>

Disabled

Disabled

<el-dm-autocomplete disabled placeholder="Disabled..." options='[...]'></el-dm-autocomplete>

Events

EventDescription
changeFired when selection changes
inputFired when search text changes
clearFired when cleared

Event Handling

const autocomplete = document.querySelector('el-dm-autocomplete');

autocomplete.addEventListener('change', (event) => {
  console.log('Selected:', event.detail.value);
  console.log('Selected values:', event.detail.selectedValues);
});

autocomplete.addEventListener('input', (event) => {
  console.log('Search:', event.detail.searchValue);
});

Keyboard Navigation

  • Arrow Down/Up: Navigate options
  • Enter: Select highlighted option
  • Escape: Close dropdown
  • Backspace: Remove last tag (in multiple mode)

Accessibility

  • Uses role="combobox" with proper ARIA attributes
  • aria-expanded indicates dropdown state
  • Options have role="option" with aria-selected
  • Full keyboard navigation support