# AutoComplete

- Page: https://jiguang132.com/resources/arco-design/docs/auto-complete
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

An input box or custom input control, with enhanced automatic completion functionality.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Show input suggestions based on current input (drop-down selection).
- **Options**: Pass in `AutoComplete.Option` as the `children` of the component instead of using `data`.
- **Custom input**: Support custom input components.
- **Strict mode**: Use `strict=true` to enable case-sensitive matching for options.
- **Advance**: This example shows: `1. Add Tooltip`, `2. Custom display`, `3. Manipulate values`.
- **With group**: Complete the input according to the query result (with group).
- **Without group**: Complete the input according to the query result (without group).
- **Custom Filter Rules**: If you rely on user input to dynamically update options, override the default option filtering rules via the `filterOption` attribute, or set it to `false` to turn off the default filtering rules.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### AutoComplete

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|allowClear|Whether to allow clear the content|boolean |`-`|-|
|defaultActiveFirstOption|Whether to highlight the first option by default|boolean |`true`|-|
|disabled|Whether to disable the autocomplete|boolean |`-`|-|
|error|Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)|boolean |`-`|-|
|loading|Whether the component is loading data.|boolean |`-`|2.10.0|
|strict|Case sensitive when set `strict: true`|boolean |`-`|-|
|defaultValue|The default value of the autocomplete.|string |`-`|-|
|placeholder|Placeholder of input|string |`-`|-|
|value|The value of the autocomplete.|string |`-`|-|
|status|Status|'error' \| 'warning' |`-`|2.45.0|
|children|Custom input/source data|ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|data|Data source|(string \| { value: string; name: string; [key: string]: any } \| ReactNode)[] |`-`|-|
|inputProps|Properties of Input component.|Partial<[InputProps](input#input)> |`-`|2.10.0|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|Pass all `Trigger` component properties|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|virtualListProps|Virtual scroll properties.|[AvailableVirtualListProps](#availablevirtuallistprops) |`-`|2.2.0|
|dropdownRender|Customize dropdown content|(menu: ReactNode) => ReactNode |`-`|-|
|filterOption|If it's true, filter options by input value. If it's a function, filter options base on the function.|boolean \| ((inputValue: string, option: ReactElement) => boolean) |`true`|-|
|getPopupContainer|To set the container of the dropdown.|(node: HTMLElement) => Element |`-`|-|
|onBlur|Callback when component is blurred|(event) => void |`-`|-|
|onChange|Callback when an option is selected or input value changes|(value: string, option?: [OptionInfo](#optioninfo)) => void |`-`|-|
|onFocus|Callback when component gets focus|(event) => void |`-`|-|
|onPressEnter|Callback when Enter is pressed|(event, activeOption?: [OptionInfo](#optioninfo)) => void |`-`|`activeOption` in 2.25.1|
|onSearch|Callback when searching items|(value: string) => void |`-`|-|
|onSelect|Callback when an option is selected.|(value: string, option: [OptionInfo](#optioninfo)) => void |`-`|-|
|triggerElement|Custom trigger element|ReactElement \| (({ value }) => ReactElement) |`<Input />`|`() => ReactElement` in 2.31.0|

### OptionInfo

```js
export interface OptionInfo extends PropsWithChildren<OptionProps> {
  child?: ReactElement;
  _valid: boolean;
  _index: number;
  _origin: "children" | "options" | "userCreatedOptions" | "userCreatingOption";
}
```

### AvailableVirtualListProps

```js
export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;
```

### AutoComplete.Option

Same as `Select.Option`, refer to [Select](/react/en-US/components/select).

### AutoComplete.OptGroup

Same as `Select.OptGroup`, refer to [Select](/react/en-US/components/select).

---

Index of all JGuang resources: https://jiguang132.com/llms.txt