logo

AutoComplete

Autocomplete function of input field.

When To Use

When there is a need for autocomplete functionality.

Examples

Basic Usage, set data source of autocomplete with DataSource property.

expand code expand code

Use compareWith when the Value type is object.

expand code expand code

Use filter expressions to filter content

expand code expand code

Fix popup container.

expand code expand code

Customize Input Component

expand code expand code

Demonstration of Lookup Patterns: Certain Category. Basic Usage, set options of autocomplete with options property.

expand code expand code

Demonstrate the performance of controls

expand code expand code

AutoComplete API#

Property Description Type Default Value
Placeholder ParameterInput element placeholder String --
Disabled ParameterDisable Boolean --
DefaultActiveFirstOption ParameterMake first option active by default or not Boolean true
Backfill ParameterBackfill selected item into the input when using keyboard to select items Boolean false
DebounceMilliseconds ParameterDelays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time Int32 250
Options ParameterOptions to display in dropdown IEnumerable<TOption> --
OptionDataItems ParameterBind the data source of the list data item format IEnumerable<AutoCompleteDataItem<TOption>> --
OnSelectionChange ParameterCallback executed when selection changes EventCallback<AutoCompleteOption> --
OnActiveChange ParameterCallback executed when active item changes EventCallback<AutoCompleteOption> --
OnInput ParameterCallback executed when input changes EventCallback<ChangeEventArgs> --
OnPanelVisibleChange ParameterCallback executed when panel visibility changes EventCallback<Boolean> --
ChildContent ParameterContent for dropdown RenderFragment --
OptionTemplate ParameterOption template RenderFragment<AutoCompleteDataItem<TOption>> --
OptionFormat ParameterFormatting options, you can customize the display format Func<AutoCompleteDataItem<TOption>, String> --
OverlayTemplate ParameterAll option templates RenderFragment --
CompareWith ParameterContrast, used to compare whether two objects are the same Func<Object, Object, Boolean> --
FilterExpression ParameterFilter expression Func<AutoCompleteDataItem<TOption>, String, Boolean> --
AllowFilter ParameterAllow filtering Boolean true
Width ParameterWidth of input, pixels when an int is given, full value given to CSS width property when a string is given OneOf<Int32?, String> --
OverlayClassName ParameterClass name passed to overlay String --
OverlayStyle ParameterStyle passed to overlay String --
PopupContainerSelector ParameterContainer selector for the popup String body
SelectedItem ParameterSelected item from dropdown AutoCompleteOption --
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening). Check TriggerBoundaryAdjustMode TriggerBoundaryAdjustMode.InView
ShowPanel ParameterDisplay options dropdown Boolean false
ValidationMessages Validation messages for the FormItem String[] --
AdditionalAttributes ParameterGets or sets a collection of additional attributes that will be applied to the created element. IReadOnlyDictionary<String, Object> --
Value ParameterGets or sets the value of the input. This should be used with two-way binding. String --
ValueChanged ParameterCallback that updates the bound value. EventCallback<String> --
ValueExpression ParameterAn expression that identifies the bound value. Expression<Func<String>> --
ValuesExpression ParameterAn expression that identifies the enumerable of bound values. Expression<Func<IEnumerable<String>>> --
Size ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` String AntSizeLDSType.Default
CultureInfo ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. CultureInfo CultureInfo.CurrentCulture
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

AutoCompleteOption API#

Property Description Type Default Value
ChildContent ParameterLabel for the option. Takes priority over Label RenderFragment --
Value ParameterValue for the option Object --
Label ParameterLabel for the option String Value.ToString()
Disabled ParameterIf option is disabled or not Boolean false
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

TriggerBoundaryAdjustMode API#

Underlying Type: Int32

Name Description
None Do not auto adjust
InView The default, the viewport boundaries are the boundaries that are used for calculation if overlay is fully visible. Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted.
InScroll The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries.
Steps Cascader
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.