@clayui/autocomplete

ClayAutocomplete component

Usage no npm install needed!

<script type="module">
  import clayuiAutocomplete from 'https://cdn.skypack.dev/@clayui/autocomplete';
</script>

README

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'

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

Table of contents

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.