ant-design/components/auto-complete/index.en-US.md
Googleplex 33b4be4851
docs(AutoComplete): add missing options in en-US document ()
Signed-off-by: Googleplex <yyoung2001@gmail.com>
2024-08-09 21:21:43 +08:00

5.7 KiB
Raw Blame History

category title description cover coverDark group demo
Components AutoComplete Autocomplete function of input field. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAAAAAAAAAAAADrJ8AQ/original
title order
Data Entry 4
cols
2

When To Use

  • When you need an input box instead of a selector.
  • When you need input suggestions or helping text.

The differences with Select are:

  • AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding input.
  • Select is selecting among given choices. The keyword is select.

Examples

Basic Usage Customized Customize Input Component Non-case-sensitive AutoComplete Lookup-Patterns - Certain Category Lookup-Patterns - Uncertain Category Status Variants Customize clear button Debug in Form _InternalPanelDoNotUseOrYouWillBeFired

API

Common props refCommon props

Property Description Type Default Version
allowClear Show clear button boolean | { clearIcon?: ReactNode } false 5.8.0: Support Object type
autoFocus If get focus when component mounted boolean false
backfill If backfill selected item the input when using keyboard boolean false
children (for customize input element) Customize input element HTMLInputElement | HTMLTextAreaElement | React.ReactElement<InputProps> <Input />
children (for dataSource) Data source to auto complete React.ReactElement<OptionProps> | Array<React.ReactElement<OptionProps>> -
defaultActiveFirstOption Whether active first option by default boolean true
defaultOpen Initial open state of dropdown boolean -
defaultValue Initial selected option string -
disabled Whether disabled select boolean false
dropdownRender Customize dropdown content (menus: ReactNode) => ReactNode - 4.24.0
popupClassName The className of dropdown menu string - 4.23.0
popupMatchSelectWidth Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll boolean | number true
filterOption If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded boolean | function(inputValue, option) true
getPopupContainer Parent node of the dropdown. Default to body, if you encountered positioning problems during scroll, try changing to the scrollable area and position relative to it. Example function(triggerNode) () => document.body
notFoundContent Specify content to show when no result matches ReactNode -
open Controlled open state of dropdown boolean -
options Select options. Will get better perf than jsx definition { label, value }[] -
placeholder The placeholder of input string -
status Set validation status 'error' | 'warning' - 4.19.0
value Selected option string -
variant Variants of input outlined | borderless | filled outlined 5.13.0
onBlur Called when leaving the component function() -
onChange Called when selecting an option or changing an input value function(value) -
onDropdownVisibleChange Call when dropdown open function(open) -
onFocus Called when entering the component function() -
onSearch Called when searching items function(value) -
onSelect Called when a option is selected. param is option's value and option instance function(value, option) -
onClear Called when clear function - 4.6.0

Methods

Name Description Version
blur() Remove focus
focus() Get focus

Design Token

FAQ

Why doesn't the text composition system work well with onSearch in controlled mode?

Please use onChange to manage control state. onSearch is used for searching input which is not the same as onChange. Besides, clicking on the option will not trigger the onSearch event.

Related issue: #18230 #17916

Why won't a controlled open AutoComplete display a drop-down menu when options are empty?

The AutoComplete component is essentially an extension of the Input form element. When the options property is empty, displaying empty text could mislead the user into believing the component is not operational, when in fact they are still able to input text. To avoid confusion, the open property will not display the drop-down menu when set to true and in combination with an empty options property. The open property must be used in conjunction with the options property.