Autocomplete

Stable3.32.0View in LexiconCHANGELOG

Composing

Autocomplete provides the necessary components for you to compose with the other components, by itself it does not do much, you need to use the <ClayDropDown /> along with <Autocomplete.DropDown /> and <Autocomplete.Item /> to create the suggestions.

<ClayAutocomplete.DropDown>
	<ClayDropDown.ItemList>
		<ClayAutocomplete.Item match="cl" value="clay" />
	</ClayDropDown.ItemList>
</ClayAutocomplete.DropDown>

If you already have the raw data, it is becomes simpler to create an autocomplete but it is important that you create a filter for your data according to the value entered in the input element.

<ClayAutocomplete>
	<ClayAutocomplete.Input
		onChange={(event) => setValue(event.target.value)}
		value={value}
	/>
	<ClayAutocomplete.DropDown active={showDropDown}>
		<ClayDropDown.ItemList>
			{resourceFiltered.map((item) => (
				<ClayAutocomplete.Item key={item} match={value} value={item} />
			))}
		</ClayDropDown.ItemList>
	</ClayAutocomplete.DropDown>
</ClayAutocomplete>

Loading state

<ClayAutocomplete.LoadingIndicator /> is used for providing feedback that data is loading in the suggestion box, it communicates with <ClayAutocomplete.Input /> so that the markup can adjust.

Data from outside

For cases where you do not have all the data in the client and need to pass the value for the filter to the backend, use the <ClayDataProvider /> component or useResource hook for this.