Auto Complete

AutoComplete control of input field.

Default

Basic usage, add auto-complete list for all inputs.

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.

sizes

Components of different sizes.

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 inputAutoCompleteOptions--
statusinput typeNormalTypes'default', 'secondary', 'success', 'warning', 'error'default
sizeinput sizeNormalSizes'mini', 'small', 'medium', 'large'medium
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
...native propsInputHTMLAttributes'id', 'className', ...-

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>