Ant Design Blazor
AutoComplete
Autocomplete function of input field.
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, set data source of autocomplete with options parameter.
Use compareWith when the Value type is object.
Use filter expressions to filter content
Demonstration of Lookup Patterns: Uncertain Category.
Fix popup container.
Customize Input Component
Demonstration of Lookup Patterns: Certain Category. Basic Usage, set options of autocomplete with options property.
Demonstrate the performance of controls
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 | false |
| 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. |