Autocomplete
An autocomplete text field is an input that offers the user text suggestions while they type.
install | yarn add @clayui/autocomplete |
---|---|
version | 3.123.0 |
Stable3.123.0View in LexiconCHANGELOG
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 Deprecatedboolean | 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 Deprecatedstring | 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> ) |