Skip to content

Autocomplete

Description

The Autocomplete component is a combination of an Input and a Dropdown, also called ComboBox. During typing, matching data items gets suggested in an option menu (listbox).

Type Ahead and ComboBox

The Autocomplete component may also be known as Type Ahead or ComboBox. But autocomplete describes the purpose more pricey and descriptive, therefore Eufemia is using this term.

When to use it:

Use it for both small autocomplete purposes and large (async) data set search. The component supports two ways of showing ProgressIndicator.

You may check out the Dropdown component for more details on how to use it etc. They both share the same DrawerList.

Highlighting

Words found during typing are highlighted. The rules are:

  • The two first words will match the beginning of an option
  • The third word will match inside an option (can be changed with search_in_word_index)
  • Case insensitive

Screen reader support

To enhance screen-reader usage, this component uses aria-live to announce the amount of options found (aria_live_options).

Custom size

.dnb-autocomplete {
--autocomplete-width: 20rem; /* custom width */
}

You can also set the width directly, but then it has to be defined like so (including min-width):

/** Because of the included label/status etc. we target the "__shell" */
.dnb-autocomplete__shell {
width: 10rem;
}
/** In order to change only the drawer-list width */
.dnb-autocomplete .dnb-drawer-list__root {
width: 10rem;
}

Dynamically change data

You can manipulate the used data dynamically, either by changing the data property, or during user events like on_type or on_focus. The following properties and methods are there to use:

Methods

  • updateData replace all data entries.
  • emptyData remove all data entries.
  • setInputValue update the input value.
  • showIndicator shows a progress indicator instead of the icon (inside the input).
  • hideIndicator hides the progress indicator inside the input.
  • showIndicatorItem shows an item with a ProgressIndicator status as an data option item.
  • showNoOptionsItem shows the "no entries found" status as an data option item.
  • setVisible shows the DrawerList.
  • setHidden hides the DrawerList.
  • showAllItems shows all DrawerList items.
  • setMode switch the mode during runtime.
  • debounce a debounce method with a cancel invocation method on repeating calls

Properties

  • dataList contains all the data entries

Example

<Autocomplete
on_focus={({ updateData, showIndicator }) => {
showIndicator()
setTimeout(() => {
updateData(topMovies)
}, 1e3)
}}
on_type={({ value /* updateData, ... */ }) => {
console.log('on_type', value)
}}
/>

Demos

Default autocomplete

Autocomplete with a custom title

Async usage, dynamically update data during typing

This example simulates server delay with a timeout and - if it gets debounced, we cancel the timeout.

Also, you may consider of using disable_filter if you have a backend doing the search operation.

Update data dynamically on first focus

With a Button to toggle the open / close state

NB: The data is given as a function and as children.

With a predefined input/search value

Different sizes

Four sizes are available: small, default, medium and large

Custom width