Svelte Component

Autocomplete

Displays a list of suggested options.

typescript 
import { Autocomplete } from '@skeletonlabs/skeleton';
import type { AutocompleteOption } from '@skeletonlabs/skeleton';
Source Page Source

Demo

The Autocomplete component does not contain it's own input by default. Instead, by using input binding paired with an on:selection event, you may utilize this component alongside any type of input that takes in suggested values.

Data Structure

You may optionally append keywords to provide additional search terms. As well as meta to provide arbitrary data - which is not utilizing for filtering. All data option data is returned by on:selection, including these.

typescript 
const flavorOptions: AutocompleteOption[] = [
	{ ..., keywords: 'mix, strawberry, chocolate, vanilla' },
	{ ..., meta: { healthy: false } },
];

Whitelist

Provide a list of values you wish to whitelist. Only options with a matching value will be displayed.

Whitelist [neapolitan, pineapple, peach]

Blacklist

Provide a list of values you wish to blacklist. Blacklisted options will be excluded from the list.

Blacklist [vanilla, chocolate]

Input Chip

We've provide a demo of using Autocomplete alongside a Skeleton Input Chip component below.

Popup

We've provide a demo of using Autocomplete alongside a Skeleton popup utility below.