Input · AutoComplete
AutoComplete
The input box is automatically filled.

When to use

Used to provide input suggestions to the input box and perform automatic completion operations
The difference with the searchable Select component:
  • AutoComplete is essentially an enhanced Input component that provides input suggestions, while Select is a selector
  • When you click to expand, Select will clear all the values in the input box, and AutoComplete will keep the last selected value
  • Select's selected item rendering (renderSelectedItem) can be more customized and can be any type of ReactNode, while AutoComplete only allows strings

Demos

How to import

Basic usage

Monitor user input through onSearch, pass input suggestions through data, and maintain control through onChange. OnChange is triggered when the input box changes/selects an input item

Custom option rendering

When you need to customize the rendering of candidates, data can be passed in an array of objects (each Object must contain two keys, label and value, value is the value selected by the candidate, and label is the content displayed by the candidate) The rendering of candidates can be customized through renderItem
Get user input value from onSearch, update data value dynamically, update loading

Size

The size of the input box can be set by setting size, optional small, default (default), large

The position of the drop-down menu

The position of the drop-down menu can be set by setting position, and the optional values refer to Tooltip position

Disabled

Validate status

Different verification states can be set to show different styles

Custom empty content

Can set up custom display empty content

API reference

PropertiesInstructionsTypeDefaultVersion
autoFocusWhether to auto focusboolfalse1.16.0
autoAdjustOverflowWhether to automatically adjust the direction when the floating layer is blocked
booltrue0.27.0
classNameStyle class namestring
dataThe data source of the candidates, which can be a string array or an object arrayarray[]
defaultActiveFirstOptionWhether to highlight the first option by default (press enter to select directly)boolfalse
defaultOpenWhether to expand the drop-down menu by defaultbooleanfalse
defaultValueDefaultsstring
disabledWhether to disablebooleanfalse
dropdownClassNameCss class name of the drop-down liststring
dropdownStyleInline style of the drop-down listobject
emptyContentCustomize the drop-down content when data is emptyReactNodenull1.16.0
getPopupContainerSpecify the parent DOM, the floating layer of the drop-down list will be rendered into the DOM, and the customization needs to set position: relative() => HTMLElement() => document.body
loadingWhether the drop-down list shows loading animationbooleanfalse
maxHeightThe maximum height of the drop-down listnumber|string300
motionIs there an animation when the drop-down list appears/hiddenboolean|objecttrue
onSelectWithObjectWhen clicking on the candidate, whether to add other attributes of the selected item option as callback parameters. When set to true, the input parameter type of onSelect will change from string to object: {value, label, ...rest}booleanfalse1.23.0
placeholderInput box promptstring
positionThe display position of the drop-down menu, the optional values are the same as the tooltip componentstring'bottomLeft'
prefixThe prefix tag of the select boxReactNode0.23.0
renderItemControl the rendering of drop-down list candidates(option: string|Item)=> React.Node
renderSelectedItemCustomize the drop-down list through renderSelectedItem after the candidate is clicked and selected, the content rendered in the select box
only supports the return value of String type
(option: string|Item) => string0.23.0
showClearWhether to show the clear buttonbooleanfalse
sizeSize, optional small, default, largestringdefault
stylestyleobject
suffixThe prefix tag of the select boxReactNode0.23.0
valueThe current valuestring|number
validateStatusValidation status, optional values are default, error, warning, and the default is default. Only affect the display stylestring'default'1.14.0
zIndexZIndex of the drop-down menunumber
onBlurCallback when the focus is lostFunction(event)
onChangeInput box change / change when the candidate is selectedFunction(value:string|number)1.23.0
onFocusThe callback when the focus is obtainedFunction(event)
onSearchCallback when input changesFunction(value: string)
onSelectCallback when the drop-down menu candidate is selectedFunction(item: string|number|Item)

Accessibility

Keyboard and Focus

  • AutoComplete's input box can be focused, and once focused, keyboard users can use Up Arrow or Down Arrow to open the options panel (if there is a panel)
  • AutoComplete also supports opening and closing panels via Enter key
  • If the user sets the defaultActiveFirstOption property to true, the first option is highlighted by default when the options panel is opened
  • If the drop-down menu is open:
    • Use Esc to close the menu
    • Use Up Arrow or Down Arrow to toggle options
    • The focused option can be selected with the Enter key and the panel will be collapsed

Content Guidelines

  • Content needs to be presented clearly so that users can clearly perceive the options available
  • Limit the number of options displayed at one time

Design Token

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED