Auto Complete

AutoComplete control of input field.

General

Basic usage, add autocomplete list for all inputs.

Type

Express state in different colors.

disabled

Disable all.

Only allow selected

You can only change the value of the input by select.

search

Update the contents of drop-down list based on input.

Waiting in search

Show friendly tips and UI when searching.

custom searching text

You can replace the default waiting text with any components.

custom no options

You can also customize the prompt with no options.

custom option

You can rewrite each item of the AutoComplete to express more.

clearable

Add a clear button in the input box.

Creatable

Add an entry to be selected for any value.

APIs

AutoComplete.Props

AttributeDescriptionTypeAccepted valuesDefault
optionsoptions of inputAutoCompleteOptionsAutoCompleteOptions-
typeinput typeAutoCompleteTypesAutoCompleteTypesdefault
initialValueinitial valuestring--
valuecurrent valuestring--
widthcontainer widthstring--
clearableshow clear iconboolean-false
searchingshow loading icon for searchboolean-false
onChangevalue of input is changed(value: string) => void--
onSearchcalled when searching items(value: string) => void--
onSelectcalled when a option is selected(value: string) => void--
dropdownClassNameclassName of dropdown boxstring--
dropdownStylestyle of dropdown boxobject--
disableMatchWidthdisable Option from follow parent widthboolean-false
disableFreeSoloonly values can be changed through Selectboolean-false
getPopupContainerdropdown render parent element, the default is body() => HTMLElement-body
refforwardRefRef<HTMLInputElement or null>--
...native propsInputHTMLAttributes'id', ...-

AutoComplete.Item[alias: AutoComplete.Option]

AttributeDescriptionTypeAccepted valuesDefault
valuea unique ident valuestring--
...native propsHTMLAttributes'id', 'className', ...-

AutoComplete.Searching

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-

AutoComplete.Empty

AttributeDescriptionTypeAccepted valuesDefault
hiddenhide empty boxboolean-false
...native propsHTMLAttributes'id', 'className', ...-

type AutoCompleteOptions

Array<
  | {
      label: string
      value: string
    }
  | AutoComplete.Item
>

AutoCompleteTypes

type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'