eliza

Autocomplete

component autocomplete textbox form-element

Definition


Autocomplete helps users to select a single option on a large amount of data, by typing some characters as filter.


c-autocomplete

This example is populated by 50 random trivia questions.


c-autocomplete with-empty-results

Sometimes you don't know what to type. In this example, when the autocomplete field is focused, the known data (or a subset) is shown to you. However you can also type for search.
In this example, you can find for Sunweb destinations in Dutch


c-autocomplete floats-from="sml" [xs,sm,sml]

The floating-box containing results is relatively positioned from the main text-box. However, on small devices, is shown fullscreen to let users focus on their decision. The breakpoint that divides those behaviours can be customized.


Special Data Types


c-autocomplete [data-type="destinations"]

Destinations are one of our main sources of data, so it deserves a better arrangement on results to help users go on vacations.


Live data


c-autocomplete live

Live autocomplete allows to perform a search through an API