Autocomplete

Events	Description
`on_type`	(optional) will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods.
`on_focus`	(optional) will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods.
`on_blur`	(optional) will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods.
`on_change`	(optional) will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including these methods.
`on_select`	(optional) will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including these methods. The active_item property is the currently selected item by keyboard navigation
`on_show`	(optional) will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.
`on_hide`	(optional) will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.

The `on_change` vs `on_select` difference

The difference between on_change and on_select is:

on_change will be called when the state changes, either with a click or space/enter keypress confirmation.
on_select differs most when the user is navigating by keyboard. Once the user is pressing e.g. the arrow keys, the selection is changing, but not the state.

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.
resetSelectedItem will invalidate the selected key.
revalidateSelectedItem will re-validate the selected key on the given value.
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. There is more documentation about this method.

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)
  }}
/>

#Autocomplete

#Events

#The on_change vs on_select difference

#Dynamically change data

#Methods

#Properties

#Example