Autocomplete extends the standard Combobox component to dynamically fetch its options from an API call as the user types into the field.
Rather than have very long lists embedded in your page, slowing rendering, the autocomplete complete component can be used instead. This sends a request
to an endpoint (suggestionsApiSearchUrl), append the search text to the end of the url. The resulting response is parsed, and presented to the user.
A requirement for the use of the autocomplete component is that the response from the server is a JSON array of objects, containing statically named fields which can be mapped to values and labels for the suggestions. The label field in the response is mapped from the apiResponseSuggestionLabelFieldname property, and the value field in the response is mapped from the apiResponseSuggestionValueFieldname property.
There is a timing threshold (inputKeyDebounceMillis), which means that fast typing does not result in large numbers of requests. This defaults to 200ms - a larger value will result in fewer requests, but might start to become a noticable delay to the end user.
See Combobox
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
Related components: