DxRegExMaskProperties.MaskAutoCompleteMode Property

Specifies the automatic value completion mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(MaskAutoCompleteMode.Strong)]
[Parameter]
public MaskAutoCompleteMode MaskAutoCompleteMode { get; set; }

Property Value

Type	Default	Description
MaskAutoCompleteMode	Strong	A MaskAutoCompleteMode enumeration value.

Available values:

Name	Description
None	The autocomplete feature is disabled. A user should type each character into the edit box.
Strong	Each time a user types a character, the editor determines if the following placeholder can be filled. If only one character matches the mask, the editor displays this character and moves the caret forward.
Optimistic	When a user enters a character in the empty edit box for the first time, the editor fills all the placeholders with the default values. 0 is the default character for placeholders that accept numeric values. For placeholders that accept letters, a is the default character.

Remarks

Use the MaskAutoCompleteMode property to enable automatic value completion. If enabled, the editor tries to complete a value that has been partially entered by a user.

Strong Mode

Strong is the default completion mode.

<DxMaskedInput @bind-Value="Value"
               Mask="\R{MonthNames}"
               MaskMode="MaskMode.RegEx" />

@code{
    string Value { get; set; }
}

For example, if a user types the letter M in an editor whose mask is \R{MonthNames}, the editor automatically displays the letter a after it because March and May start with the letter M, and the second letter is ‘a’ in both cases.

If a user adds r to the editor’s value, the component completes the input and displays March:

Optimistic Mode

The following code snippet enables the Optimistic completion mode.

<DxMaskedInput @bind-Value="Value"
               Mask="\R{MonthNames}"
               MaskMode="MaskMode.RegEx">
    <DxRegExMaskProperties MaskAutoCompleteMode="MaskAutoCompleteMode.Optimistic" />
</DxMaskedInput>

@code{
    string Value { get; set; }
}

For example, if a user types the letter M in an editor whose mask is set to \R{MonthNames}, the editor completes the value and sets it to May. Only ‘March’ and ‘May’ are possible completions and the editors selects the shorter alternative. The control also selects the letter ‘y’ so that a user can change it: