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 } },
];

Allowed Options

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

Allowed [neapolitan, pineapple, peach]

Denied Options

Provide a list of values you wish to deny. Denied options will be excluded from the list.

Denied [vanilla, chocolate]

Input Chip

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

inputChip: ""
flavorOptions: [
  {
    "label": "Vanilla",
    "value": "vanilla",
    "keywords": "plain, basic",
    "meta": {
      "healthy": false
    }
  },
  {
    "label": "Chocolate",
    "value": "chocolate",
    "keywords": "dark, white",
    "meta": {
      "healthy": false
    }
  },
  {
    "label": "Strawberry",
    "value": "strawberry",
    "keywords": "fruit",
    "meta": {
      "healthy": true
    }
  },
  {
    "label": "Neapolitan",
    "value": "neapolitan",
    "keywords": "mix, strawberry, chocolate, vanilla",
    "meta": {
      "healthy": false
    }
  },
  {
    "label": "Pineapple",
    "value": "pineapple",
    "keywords": "fruit",
    "meta": {
      "healthy": true
    }
  },
  {
    "label": "Peach",
    "value": "peach",
    "keywords": "fruit",
    "meta": {
      "healthy": true
    }
  }
]
inputChipList: [
  "vanilla",
  "chocolate"
]

Popup

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