Autocomplete
yarn add @clayui/autocomplete
An autocomplete text field is an input that offers the user text suggestions while they type.
Stable3.2.4View in LexiconCHANGELOG
Autocomplete
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
component | React.ForwardRefExoticComponent<any> | false | React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({children, ...otherProps}, ref) => ( <ClayInput.Group {...otherProps} ref={ref}> <ClayInput.GroupItem>{children}</ClayInput.GroupItem> </ClayInput.Group> )) | Div component to render. It can be a one component that will replace the markup. |
Autocomplete.DropDown
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
alignElementRef | React.RefObject<HTMLElement> | false | HTML element that the menu should be aligned to | |
active | boolean | false | false | Flag to indicate if menu is showing or not. |
onSetActive | (val: boolean) => void | false | () => {} | Callback function for when active state changes. |
Autocomplete.Input
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 | Type | Required | Default | Description |
|---|---|---|---|---|
innerRef | React.Ref<HTMLAnchorElement> | false | ||
match | string | false | '' | Match is the string that will be compared with value. |
value | string | true | Value is the string that will be compared to the characters of the match property. |
Autocomplete.LoadingIndicator
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
component | React.ComponentType<any> | false | ({children, ...otherProps}) => ( <ClayInput.GroupInsetItem {...otherProps} after> <span className="inline-item inline-item-middle">{children}</span> </ClayInput.GroupInsetItem> ) | Div component to render. It can be a one component that will replace the markup. |