Autocomplete
Displays a list of suggested options.
import { Autocomplete } from '@skeletonlabs/skeleton';
import type { AutocompleteOption } from '@skeletonlabs/skeleton';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.
const flavorOptions: AutocompleteOption[] = [
{ ..., keywords: 'mix, strawberry, chocolate, vanilla' },
{ ..., meta: { healthy: false } },
];Allowed Options
Provide a list of values you wish to allow. Only options with a matching value will be displayed.
Denied Options
Provide a list of values you wish to deny. Denied options will be excluded from the list.
Input Chip
We've provided 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.