@clayui/autocomplete

---

title: 'Autocomplete' description: 'An autocomplete text field is an input that offers the user text suggestions while they type.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-variations/' packageNpm: '@clayui/autocomplete' sibling: 'docs/components/css-text-input-autocomplete.html'

import { AutocompleteWithLoadingState, AutocompleteWithDataProvider, } from '$packages/clay-autocomplete/docs/index';

Table of contents

• Loading state
• Data from outside
• API
  • Autocomplete
  • Autocomplete.DropDown
  • Autocomplete.Input
  • Autocomplete.Item
  • Autocomplete.LoadingIndicator

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.

Warning Add this when your suggestion data is coming from a data provider.

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.

API

Autocomplete

[APITable "clay-autocomplete/src/index.tsx"]

Autocomplete.DropDown

[APITable "clay-autocomplete/src/DropDown.tsx"]

Autocomplete.Input

Extends from ClayForm.Input

Autocomplete.Item

ClayAutocomplete.Item is a wrapper around ClayDropDown.Item but also underlines the bold characters that are matched. Feel free to create your own match rule using ClayDropDown.Item's API.

[APITable "clay-autocomplete/src/Item.tsx"]

Autocomplete.LoadingIndicator

[APITable "clay-autocomplete/src/LoadingIndicator.tsx"]