.NET MAUI AutoComplete Configuration

The purpose of this help article is to show you the main configuration options of the control.

Placeholder

AutoComplete exposes Placeholder property which is used to give guidance to the end user on what should be entered in the text input. You can also use the PlaceholderColor property to define the placeholder text color of the component.

Display Mode

DisplayMode (Telerik.Maui.Controls.AutoCompleteDisplayMode)—Specifies how an item picked from the SuggestionView is visualized.

The default DisplayMode is Plain—The picked item is visualized as plain text. If you want to visualize multiple items, set the DisplayMode to Tokens—Each item is displayed in a Token box.

Completion Mode

The Telerik UI for .NET MAUI AutoComplete control filters the source by the entered text. By using the CompletionMode (enum of type Telerik.Maui.Controls.AutoCompleteCompletionMode) property, you can specify how the ItemsSource will be filtered when the user types in the input area:

StartsWith filters the items that start with the text typed in the input area.
Contains filters the items that contain the text typed in the input area.

The matching items to the filter are displayed in a SuggestionView if the RadAutoComplete.AutoCompleteSuggestMode is Append or SuggestAppend.

Keyboard

The Keyboard property of type Microsoft.Maui.Keyboard allows you to define the type of the keyboard that will be visualized by the device.

<telerikInput:RadAutoComplete Keyboard="Numeric" />

Clear Button Visibility

The Clear Button, which appears at the right side of the input field when the AutoComplete is on focus, gives the end-user the option to quickly clear the entered values. You can control the visibility of the button through the IsClearButtonVisible property. The default value is True.

<telerik:RadAutoComplete x:Name="autoCompleteClearButtonVisibility"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         IsClearButtonVisible="False" />

No Results Message

The NoResults message appears in the popup used for the list of suggestions whenever the control cannot find any matching items. You can use the following properties to customize the NoResult message:

NoResultsMessage (string)—Defines the message visualized when no suggestions are found.
NoResultsTemplate (DataTemplate)—Defines the template visualized when no suggestions are found.

<telerik:RadAutoComplete x:Name="autoCompleteNoResults"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         NoResultsMessage="there are no matching items..." />

Search Threshold

By default the search is triggered as soon as the user types into the input field. By using SearchThreshold you can configure AutoComplete to trigger the search after a certain number of letters is entered.

<telerik:RadAutoComplete x:Name="autoCompleteSearchTreshold"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         SearchThreshold="3" />

SuggestionView Visibility

ShowSuggestionView (bool)—Determine the visibility of the popup containing the search results of the AutoComplete. The default value is True.
SuggestionViewHeight (double)—Defines the height of the SuggestionView.
SuggestionViewMaxHeight (double)—Defines the max height of the SuggestionView. Always set the SuggestionViewMaxHeight, so that you can have a predefined heigh for the suggestion view. If using both the SuggestionViewMaxHeight and SuggestionViewHeight properties, the max height value must be heigher.
SuggestionViewBorderColor (Color)—Defines the color of the suggestion view border (drop-down).
SuggestionViewBorderThickness (Thickness)—Defines the thickness of the border around the suggestion view.
SuggestionViewCornerRadius (Thickness)—Defines the corner radius applied to the suggestion view.
SuggestionViewBackgroundColor (Color)—Defines the BackgroundColor of the suggestion view.

<telerik:RadAutoComplete x:Name="autoCompleteSuggestionView"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         CompletionMode="StartsWith"
                         SuggestMode="Append"
                         ShowSuggestionView="False"
                         SuggestionViewMaxHeight="100"
                         SuggestionViewBackgroundColor="LightBlue" />

SuggestionView Position

SuggestionViewPosition property which enables you to explicitly define whether the suggestions popup will be shown below or above the input field. SuggestionViewPosition is of enum type Telerik.Maui.Controls.AutoCompletePopupPosition and can be set to any of the following values:
- (default) Auto
- Top
- Bottom

Where Auto calculates the available space and chooses what's the best position of the popup, starting with Bottom. With Top/Bottom setting, the popup is positioned above or below the AutoComplete respectively.

<telerik:RadAutoComplete ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         SuggestionViewPosition="Top" />