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<string>[] = [
{ ..., 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.
Custom Filter
Provide a custom filter function using the prop filter.
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.
Browser Support
For Firefox, when wrapping the Autocomplete component in an parent element that uses overflow
styling, make sure you add tabindex="-1". By doing this, it will ensure that tab navigation selects the
children within, instead of the wrapping element itself.