Dynamically change data#

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

Methods#

• updateData replace all data entries.
• emptyData remove all data entries.
• resetSelectedItem will invalidate the selected key.
• revalidateSelectedItem will re-validate the internal selected key on the given value.
• revalidateInputValue will re-validate the current input value and update it – based on the given value.
• setInputValue update the input value.
• clearInputValue will set the current input value to an empty string.
• focusInput will set focus on the input element.
• showIndicator shows a progress indicator instead of the icon (inside the input). When icon={null} is set, no progress indicator is shown.
• hideIndicator hides the progress indicator inside the input.
• showIndicatorItem shows an item with a ProgressIndicator status as a data option item.
• showNoOptionsItem shows the "no entries found" status as a data option item.
• setVisible shows the DrawerList.
• setHidden hides the DrawerList.
• showAllItems shows all DrawerList items.
• setMode switches the mode during runtime.
• debounce a debounce method with a cancel invocation method on repeating calls. There is more documentation about this method.

Properties#

• dataList contains all the data entries.

Example#

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