@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'

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

Table of contents

• Loading state
• Data from outside

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.

Changelog

3.42.0 (2021-12-15)

Bug Fixes

• @clayui/color-picker: Add active and onActiveChange props (4c7c683)
• @clayui/css: Atlas Pagination focus shadow should match Lexicon's (1f677e2)
• @clayui/css: Button Group .dropdown-toggle-split should use calc to calculate padding (8d88a2d), closes #4499
• @clayui/css: Cadmin convert maps being passed into clay-navbar-variant to use new keys (8aa1044)
• @clayui/css: Cadmin Navbar Component Variants only output media query (md) styles used in DXP (2477c7e)
• @clayui/css: Cadmin Pagination update map keys to use newer keys (9beabca)
• @clayui/css: Convert maps being passed into clay-navbar-variant to use new keys (4f4ba86)
• @clayui/css: Declares border-color and border-style for Management Bar and Navigation Bar base (e67c284)
• @clayui/css: Mixin clay-button-variant unbundles .show from .active (73227a0)
• @clayui/css: Mixin clay-toggle-switch-bar-variant adds .button-icon-off selector (6d3e8fe), closes #4486
• @clayui/css: Mixins _links.scss check if parameter is type map before processing (385fd6b)
• @clayui/css: Mixins clay-link and clay-close Removes the .show > & selector (9b523cf)
• @clayui/css: Mixins clay-navbar-variant convert to clay-css mixin pattern (59b722b)
• @clayui/css: Mixins clay-navbar-variant don't output properties if param is empty map (e6230e7)
• @clayui/css: Mixins check if parameter is map to avoid must be a map error (a128597)
• @clayui/css: Multi Step Nav use calc to calculate sizing for CSS variable compatibility (96dde7e), closes #4498
• @clayui/css: Navbar Component Variants only output media query (md) styles used in DXP (7435d7d)
• @clayui/css: replace filter icon (8231dae), closes #4490
• @clayui/css: Toggle Switch increase specificity of simple-toggle-switch (8f86cd6), closes #4484
• @clayui/form: add missing "textarea" type to Input's component prop (b0a3b89), closes #4477
• clayui.com: updates Google Analytics ID (f6976f4)

Features

• @clayui/css: Cadmin Pagination convert to use clay mixins (56947b5)
• @clayui/css: Cadmin Popovers generate styles using clay-css mixin (d40ef1f)
• @clayui/css: Cadmin Tooltip generate styles using clay-tooltip-variant mixin (df4011e)
• @clayui/css: Mixins clay-button-variant adds option to style ::before and ::after (4003b59)
• @clayui/css: Mixins clay-navbar-variant should be able to output clay-navbar-size selectors (ffaee2a)
• @clayui/css: Mixins adds clay-pagination-items-per-page-variant and clay-pagination-variant (84fff62)
• @clayui/css: Mixins adds clay-popover-variant (9dc84b1)
• @clayui/css: Mixins adds clay-tooltip-variant (5bb6319)
• @clayui/css: Pagination convert to use clay mixins (188ed54)
• @clayui/css: Popovers generate styles using clay-css mixin (6a5c2f6)
• @clayui/css: Tooltip generate styles using clay-tooltip-variant mixin (20f89e5)

BREAKING CHANGES

• @clayui/css: We previously output navbar-expand-{sm|md|lg|xl} for the variants of:

  • Application Bar
  • Management Bar
  • Navigation Bar
  • Sidebar Navigation Bar

We only output those that are needed namely, navbar-expand-md. If you relied upon other breakpoints you will need to declare them in the respective Sass map or set:

$application-bar-base: (
	media-breakpoint-down: $c-unset,
	media-breakpoint-up: $c-unset,
);

to revert back to the old way.

• @clayui/css: The mixin clay-navbar-variant output border-color: transparent and border-style: solid by default. This has been removed to reduce unnecessary CSS. You will need to declare them in your Sass map if you relied upon it.