Autocomplete

An autocomplete text field is an input that offers the user text suggestions while they type.

install	yarn add @clayui/autocomplete
version	3.120.0

Stable 3.120.0 View in Lexicon CHANGELOG

Autocomplete (Deprecated)
Autocomplete
Autocomplete.DropDown (Deprecated)
Autocomplete.Input (Deprecated)
Autocomplete.Item
Autocomplete.LoadingIndicator (Deprecated)

AutocompleteDeprecated

Property	Description
`component` `React.ForwardRefExoticComponent<any>`	Div component to render. It can be a one component that will replace the markup. The default value is React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({children, ...otherProps}, ref) => ( <ClayInput.Group {...otherProps} ref={ref}> <ClayInput.GroupItem>{children}</ClayInput.GroupItem> </ClayInput.Group> ))

AutocompleteNEW

Property	Description
`active` `boolean`	Flag to indicate if menu is showing or not.
`as` `\| 'input' \| React.ForwardRefExoticComponent<any> \| ((props: React.ComponentProps<typeof Input>) => JSX.Element)`	Custom input component. The default value is Input
`alignmentByViewport`Deprecated `boolean`	Flag to align the DropDown menu within the viewport. @deprecated since v3.92.0 - it is no longer necessary..
`allowsCustomValue` `boolean`	Flag to allow an input value not corresponding to an item to be set.
`defaultActive` `boolean`	The initial value of the active state (uncontrolled).
`defaultValue` `string`	The initial value of the input (uncontrolled).
`direction` `'bottom' \| 'top'`	Direction the menu will render relative to the Autocomplete. The default value is 'bottom'
`filterKey` `string`	Defines the name of the property key that is used in the items filter test (Dynamic content).
`items` `Array<T> \| null`	Property to render content with dynamic data.
`defaultItems` `Array<T> \| null`	Property to set the initial value of `items` (uncontrolled).
`messages` `{ listCount?: string; listCountPlural?: string; loading: string; notFound: string; }`	Messages for autocomplete.
`onActiveChange` `InternalDispatch<boolean>`	Callback for when the active state changes (controlled).
`onChange` `InternalDispatch<string>`	Callback called when input value changes (controlled).
`onItemsChange` `InternalDispatch<Array<T> \| null>`	Callback called when items change (controlled).
`onLoadMore` `() => Promise<any> \| null`	Callback is called when more items need to be loaded when the scroll reaches the bottom.
`value` `string`	The current value of the input (controlled).
`menuTrigger` `'input' \| 'focus'`	The interaction required to display the menu. The default value is 'input'
`loadingState` `number`	The current state of Autocomplete current loading. Determines whether the loading indicator should be shown or not.

Autocomplete.DropDownDeprecated

Property	Description
`alignElementRef` `React.RefObject<HTMLElement>`	HTML element that the menu should be aligned to
`alignmentByViewport` `boolean`	Flag to align the DropDown menu within the viewport.
`active` `boolean`	Flag to indicate if menu is showing or not. The default value is false
`closeOnClickOutside` `React.ComponentProps< typeof DropDown.Menu >['closeOnClickOutside']`	Flag to indicate if clicking outside of the menu should automatically close it.
`onActiveChange` `InternalDispatch<boolean>`	Callback for when the active state changes (controlled).
`onSetActive`Deprecated `(val: boolean) => void`	Callback function for when active state changes. @deprecated since v3.74.0 - use `onActiveChange` instead.

Autocomplete.InputDeprecated

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.

Property	Description
`children` `React.ReactNode`	The item content.
`innerRef` `React.Ref<HTMLAnchorElement>`
`match` `string`	Match is the string that will be compared with value.
`value`Deprecated `string`	Value is the string that will be compared to the characters of the match property. @deprecated since v3.74.0 - use `children` instead.
`textValue` `string`	Sets a text value if the component's content is not plain text. This value is used in the combobox element to show the selected option.

Autocomplete.LoadingIndicatorDeprecated

Property	Description
`component` `React.ComponentType<any>`	Div component to render. It can be a one component that will replace the markup. The default value is ({ children, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => ( <ClayInput.GroupInsetItem {...otherProps} after> <span className="inline-item inline-item-middle">{children}</span> </ClayInput.GroupInsetItem> )