AutoComplete

Autocomplete function of input field.

When to use

When you need an input box instead of a selector.
When you need input suggestions or helping text.

The differences with Select are:

AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding input.
Select is selecting among given choices. The keyword is select.

Examples

Basic Usage

Basic Usage, set data source of autocomplete with options property.

Customize Input Component

Lookup-Patterns - Certain Category

Demonstration of Lookup Patterns: Certain Category. Basic Usage, set options of autocomplete with options property.

Status

Add status to AutoComplete with status, which could be error or warning.

Customize clear button

Customized

You could set custom Option label

Non-case-sensitive AutoComplete

A non-case-sensitive AutoComplete

Lookup-Patterns - Uncertain Category

Demonstration of Lookup Patterns: Uncertain Category.

Variants

There are outlined, filled, borderless, and underlined variants to choose from.

Custom semantic dom styling

You can customize the semantic dom style of AutoComplete by passing objects/functions through classNames and styles.

API

AutoComplete and its props are exported from @ceebee/ui/client.

AutoComplete

Property	Description	Type	Default	Version
`allowClear`	Show clear button	`boolean \| { clearIcon?: ReactNode }`	`false`	5.8.0: Support Object type
`backfill`	If backfill selected item the input when using keyboard	`boolean`	`false`	—
`children`	Customize input element	`HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps>`	`<Input />`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`dataSource`	Data source of autocomplete options, please use options instead	`DataSourceItemType[]`	`-`	-
`defaultActiveFirstOption`	Whether active first option by default	`boolean`	`true`	—
`defaultOpen`	Initial open state of dropdown	`boolean`	`-`	—
`defaultValue`	Initial selected option	`string`	`-`	—
`disabled`	Whether disabled select	`boolean`	`false`	—
`dropdownClassName`	The className of dropdown menu, please use classNames.popup.root instead	`string`	`-`	-
`dropdownMatchSelectWidth`	Determine whether the dropdown menu and the input are the same width, please use popupMatchSelectWidth instead	`boolean \| number`	`true`	-
`dropdownRender`	Customize dropdown content, use popupRender instead	`(originNode: ReactNode) => ReactNode`	`-`	4.24.0
`popupRender`	Customize dropdown content	`(originNode: ReactNode) => ReactNode`	`-`	—
`dropdownStyle`	The style of dropdown menu, use styles.popup.root instead	`CSSProperties`	`-`	—
`popupClassName`	The className of dropdown menu, use classNames.popup.root instead	`string`	`-`	4.23.0
`popupMatchSelectWidth`	Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll	`boolean \| number`	`true`	—
`filterOption`	If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded	`boolean \| function(inputValue, option)`	`true`	—
`getPopupContainer`	Parent node of the dropdown. Default to body, if you encountered positioning problems during scroll, try changing to the scrollable area and position relative to it. Example	`function(triggerNode)`	`() => document.body`	—
`notFoundContent`	Specify content to show when no result matches	`ReactNode`	`-`	—
`open`	Controlled open state of dropdown	`boolean`	`-`	—
`options`	Select options. Will get better perf than jsx definition	`{ label, value }\[]`	`-`	—
`placeholder`	The placeholder of input	`string`	`-`	—
`showSearch`	search for configuration	`true \| Object`	`true`	—
`status`	Set validation status	`'error' \| 'warning'`	`-`	4.19.0
`size`	The size of the input box	`large \| medium \| small`	`-`	—
`value`	Selected option	`string`	`-`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`variant`	Variants of input	`outlined \| borderless \| filled \| underlined`	`outlined`	5.13.0
`virtual`	Disable virtual scroll when set to false	`boolean`	`true`	4.1.0
`onBlur`	Called when leaving the component	`function()`	`-`	—
`onChange`	Called when selecting an option or changing an input value	`function(value)`	`-`	—
`onDropdownVisibleChange`	Called when dropdown open, use onOpenChange instead	`(open: boolean) => void`	`-`	—
`onOpenChange`	Called when dropdown open	`(open: boolean) => void`	`-`	—
`onFocus`	Called when entering the component	`function()`	`-`	—
`onSearch`	Called when searching items	`function(value)`	`-`	—
`onSelect`	Called when a option is selected. param is option's value and option instance	`function(value, option)`	`-`	—
`onClear`	Called when clear	`function`	`-`	4.6.0
`onInputKeyDown`	Called when key pressed	`(event: KeyboardEvent) => void`	`-`	—
`onPopupScroll`	Called when dropdown scrolls	`(event: UIEvent) => void`	`-`	—

showSearch

Property	Description	Type	Default	Version
`filterOption`	If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded	`boolean \| function(inputValue, option)`	`true`	—
`onSearch`	Called when searching items	`function(value)`	`-`	—
`blur()`	Remove focus	`—`	`—`	—
`focus()`	Get focus	`—`	`—`	—