AutoComplete control of input field.
Basic usage, add auto-complete list for all inputs.
Disable all.
You can only change the value of the input by select.
Update the contents of drop-down list based on input.
Show friendly tips and UI when searching.
You can replace the default waiting text with any components.
You can also customize the prompt with no options.
You can rewrite each item of the AutoComplete
to express more.
Components of different sizes.
Add a clear button in the input box.
Add an entry to be selected for any value.
AutoComplete.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
options | options of input | AutoCompleteOptions | - | - |
status | input type | NormalTypes | 'default', 'secondary', 'success', 'warning', 'error' | default |
size | input size | NormalSizes | 'mini', 'small', 'medium', 'large' | medium |
initialValue | initial value | string | - | - |
value | current value | string | - | - |
width | container width | string | - | - |
clearable | show clear icon | boolean | - | false |
searching | show loading icon for search | boolean | - | false |
onChange | value of input is changed | (value: string) => void | - | - |
onSearch | called when searching items | (value: string) => void | - | - |
onSelect | called when a option is selected | (value: string) => void | - | - |
dropdownClassName | className of dropdown box | string | - | - |
dropdownStyle | style of dropdown box | object | - | - |
disableMatchWidth | disable Option from follow parent width | boolean | - | false |
disableFreeSolo | only values can be changed through Select | boolean | - | false |
... | native props | InputHTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Item
[alias: AutoComplete.Option
]Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
value | a unique ident value | string | - | - |
... | native props | HTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Searching
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
... | native props | HTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Empty
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
hidden | hide empty box | boolean | - | false |
... | native props | HTMLAttributes | 'id', 'className', ... | - |
type AutoCompleteOptions
Array<{
label: string
value: string
} | AutoComplete.Item>