AutocompleteField

A plain unstyled input element with a dropdown for suggestions.

The Autocomplete component uses it to provide a full-featured autocomplete solution with chips for selection, it may be better if you don't intend to display the selection on your own.

Related Components
Autocomplete
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}` },
    ];
  }

  let selection = [];
</script>

<AutocompleteField {getOptions} bind:selection />
<pre>{JSON.stringify(selection, null, 2)}</pre>

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.
focus false boolean Allows to programmatically control whether the suggestions dropdown is shown.
disabled false boolean Whether to disable the field.
... any Everything else will be passed to the underlying <input> element.
* Required

Class Properties

All <AutocompleteField> components use the .autocomplete-field 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 #

too-many-options slot

The message to show in the dropdown when the maximum amount of selected options has been reached.

not-enough-input slot

The message to show in the dropdown when the minimum amount of characters to type for searching hasn't been reached.

loading-options slot

The loading state of the dropdown while the next promise with suggestions is resolving.

more-options slot

The element to display at the end of a list to trigger the option generator. Defaults to a button equipped with an IntersectionObserver to trigger the generator whenever it scrolls into view.

Prop Name
Type
Description
loadMoreOptions Function A callback to trigger the option generator.

close-message slot

Use this slot to translate the "close the options" message that appears when tabbing into the dropdown of options.

loading-message slot

Use this slot to translate the "loading" message that appears while the options are loading.

load-more-options-message slot

Use this slot to translate the "load more options" message that appears when you scroll to the bottom of the list of options before the infinite scroll triggers loading itself.

SCSS Variables #

Name
Description
Default
$light-contrast The color of the scrollbar on WebKit browsers.
#DDDDDD
$thin-font-weight The thin font weight of the status messages like 'type X characters to search'. 300
$main From AutocompleteOption The background color on hover and the color of the highlight in the options.
#4300B0
$font From AutocompleteOption The font of the autocomplete options. 'Ubuntu'
$bold-font-weight From AutocompleteOption The bold font weight to emphasize the highight in the options. 500
$font From Button The font of the buttons used for dismissing focus and loading more options. 'Ubuntu'
$button-radius From Button The curvature radius of buttons used for dismissing focus and loading more options. 1.5625em