import {Provider} from'@clayui/core';
importAutocompletefrom'@clayui/autocomplete';
importFormfrom'@clayui/form';
importReactfrom'react';
exportdefaultfunctionApp() {
return (
<Providerspritemap="/icons.svg">
<divclassName="p-4">
<Form.Group>
<labelhtmlFor="clay-autocomplete-1"id="clay-autocomplete-label-1">
Numbers (one-five)
</label>
<Autocompletearia-labelledby="clay-autocomplete-label-1"id="clay-autocomplete-1"defaultItems={['one', 'two', 'three', 'four', 'five']}
messages={{
loading: 'Loading...',
notFound: 'No results found',
}}
placeholder="Enter a number from One to Five"
>
{(item) => <Autocomplete.Itemkey={item}>{item}</Autocomplete.Item>}
</Autocomplete>
</Form.Group>
</div>
</Provider>
);
}
Introduction
Autocomplete provides as a mid-level API as it was done for TreeView and follows the same standards that exist in Clay components. A new implementation of Autocomplete provides new OOTB functionality and lessens the verbose composition of the old implementation but still provides backward compatibility but will be deprecated in the next major release, so if you are using this component for the first time, consider using the new implementation.
Content
Autocomplete follows the Collection pattern, the same as TreeView and VerticalBar, it accepts static and dynamic contents. Similar to TreeView, the content accepts the Item component but the Item that belongs to Autocomplete, <Autocomplete.Item />.
Static
Snippet
<Autocompletemessages={{
loading: 'Loading...',
notFound: 'No results found',
}}
placeholder="Enter the name of a fruit"
>
<Autocomplete.Itemkey="Apples">Apples</Autocomplete.Item>
<Autocomplete.Itemkey="Bananas">Bananas</Autocomplete.Item>
<Autocomplete.Itemkey="Cantaloupe">Cantaloupe</Autocomplete.Item>
<Autocomplete.Itemkey="Mangos">Mangos</Autocomplete.Item>
<Autocomplete.Itemkey="Oranges">Oranges</Autocomplete.Item>
<Autocomplete.Itemkey="Strawberries">Strawberries</Autocomplete.Item>
</Autocomplete>
Dynamic
Dynamic content works when the data comes from a service, there are two possible scenarios:
All data exists on the client and the filter is done on the client
The filter is done on the server
Snippet
<Autocompletemessages={{
loading: 'Loading...',
notFound: 'No results found',
}}
defaultItems={[
'Apples',
'Bananas',
'Cantaloupe',
'Mangos',
'Oranges',
'Strawberries',
]}
placeholder="Enter the name of a fruit"
>
{(item) => <Autocomplete.Itemkey={item}>{item}</Autocomplete.Item>}
</Autocomplete>
The most common scenario for a large list of data is the filter is done on the server and it is necessary to make a request to the server as soon as the input value changes and update the list respectively. You need to make Autocomplete a controlled component that allows you to state control.
To internationalize data in Autocomplete, you must pass the data to each child of the Item. Autocomplete also handles “Not found” and “Loading” messages for the respective scenarios, it is necessary to define the internationalized messages by defining the messages prop.
Value
The value of Autocomplete by default is an empty value, but it can start with a value using the defaultValue prop. Also, a value can be controlled by providing the value and onChange properties to switch to the controlled state.
Autocomplete supports loading data asynchronously, and displays the loading indicator reflecting the current loading state, by setting the loadingState prop.
By default, Autocomplete uses the contains string filtering strategy to decide which items should be visible in the menu. This filtering strategy can be replaced by your own filtering rule by passing the data through the items prop.
By default, Autocomplete show the menu when the user types in the input field. Alternatively this mode can be modified by setting the menuTrigger property to focus, which shows the menu when Autocomplete is focused.