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
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| options | options of input | AutoCompleteOptions | AutoCompleteOptions | - |
| type | input type | AutoCompleteTypes | AutoCompleteTypes | default |
| 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 |
| getPopupContainer | dropdown render parent element, the default is body | () => HTMLElement | - | body |
| ref | forwardRef | Ref<HTMLInputElement | null> | - | - |
| ... | native props | InputHTMLAttributes | 'id', ... | - |
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>
AutoCompleteTypes
type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
Contributors