Autocomplete facilitates the selection of a single item from a list of suggestions.
Overview
Autocomplete relies on developers to provide a list of suggestions to the user. The user can then select a single suggestion from the list.
Usage
- Filtering and searching long lists
- Returning items to a user based on input
Sample
Best practices
While visually similar to the Combobox, the Autocomplete component has distinct capabilities and intended use cases.
Comparison
Most often used with very long or unpredictable lengths of items.
Best for programmatically returning responses based on user input.
Does not accept custom values or multiple selections.
Most often used when the workflow requires multiple selections.
Best when the number of selectable items is finite and small.
Often used for accepting custom values and both single and multiple selection .
Recommendations
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Backspace | When the component is focused and contains a selected calcite-autocomplete-item will remove the most recently added from the component. |
Space | If the component is not open, opens the component. |
Arrow up | If the component is open and in focus, moves focus to previous calcite-autocomplete-item. If the current focus is the first calcite-autocomplete-item. |
Arrow down | If the component is open and in focus, move focus to next calcite-autocomplete-item. If the current focus is the last calcite-autocomplete-item, focus will cycle to the first calcite-autocomplete-item. |
Enter | If the component is open and a calcite-autocomplete-item is active, will select the item. |
Esc | If the component is open, closes the component. |
Tab | Moves focus in and out of the component. If the component is not open and calcite-autocomplete-items are present, the component will open. If the component is open, the component will close. |
Tab and Shift | Moves focus in and out of the component. If the component is not open and calcite-autocomplete-item's are present, the component will open. If the component is open, the component will close. |
Home | Moves focus to the first calcite-autocomplete-item, if present. If the component is not open and calcite-autocomplete-item's are present, the component will open. |
End | Moves focus to the last calcite-autocomplete-item, if present. If the component is not open and calcite-autocomplete-item's are present, the component will open. If the component is open, the component will close. |