Autocomplete

A text field suggesting options to select.

Builds upon the AutocompleteField, prefer that instead if you need more customization freedom.

Related Components
AutocompleteField
AutocompleteOption
Showcase
Type 3 characters to search
Source 
<script>
  async function* getOptions(text) {
    await sleep(1000);
    yield [
      { name: text, details: 'Optional' },
      { name: `it highlights the match: ${text}` },
    ];
  }
</script>

<Autocomplete {getOptions} />

Properties #

Functional Properties

Name
Default
Type
Description
getOptions * async function* An async generator of suggestions.
Receives the input from the text field and is expected to yield promises that resolve to arrays of objects { name, details }.
selection [] Array The current selection as an array of objects { name, details }.
Can be used to set the selection programmatically.
minSearchLength 3 number The minimum amount of characters to call getOptions.
maxOptions Infinity number The maximum amount of options than can be selected.
searchQuery '' string The current value of the text field. Can be used to control the query programmatically.
optionComponent AutocompleteOption Svelte component The component used to render a suggestion in the list.
Receives two props: the option object ({ name, details }) and the current query.
Expected to dispatch click events on selection.
disabled false boolean Whether to disable the field.
... any Everything else will be passed to the underlying <AutocompleteField> component.
* Required

Class Properties

All <Autocomplete> components use the .autocomplete class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.

Events #

Name
Event Detail
Description
change { value } Fired when the selection changes. The value contains the selection array.

Slots #

All slots of AutocompleteField are available here with the same names.

SCSS Variables #

Name
Description
Default
$main The bottom border color of the selected text field and the highlight color in options.
#4300B0
$font The font of the text field's content and the options. 'Ubuntu'
$textfield-border The bottom border color of the unselected text field.
rgba(0, 0, 0, .42)
$textfield-bg The background color of the text field.
#F5F5F5
$light-contrast From AutocompleteField The color of the scrollbar on WebKit browsers.
#DDDDDD
$thin-font-weight From AutocompleteField The thin font weight of the status messages like 'type X characters to search'. 300
$bold-font-weight From AutocompleteOption The bold font weight to emphasize the highight in the options. 500
$chip-bg From Chip The background color of a non-outline chip.
rgba(0, 0, 0, .08)
$chip-fg From Chip The text color of a chip.
#656565
$chip-radius From Chip The curvature radius of a chip. 1.5625em
$dark From Button The color of the Xs on the option chips.
#333333