Key Features

The purpose of this help article is to show you the key features of the RadAutoCompleteView control.

Tokens Support

With AutoCompleteView you could enable users to search for and select several items. These items appear as tokens that can easily be deselected using their close button.

DisplayMode (SuggestionsDisplayMode) property determines whether a single or multiple selection is enabled. The default DisplayMode is “Plain”, for multiple selection you would need to set it to “Tokens”.

<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewTokens"
                                  ItemsSource="{Binding Source}"
                                  TextSearchPath="Name" 
                                  BackgroundColor="White"
                                  DisplayMode="Tokens"/>

Here is the result when the DisplayMode is set to Tokens:

AutoCompleteView Tokens

Filtering Options

You can determine the filtering behavior of RadAutoCompleteView through the CompletionMode property. The available completion modes are "StartsWith" (default) and "Contains".

In data-binding scenarios you will also need to set TextSearchPath property, which defines the name of the property the search function will be executed against. For more details check the Data Binding topic.

<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewFilter"
                                  ItemsSource="{Binding Source}" 
                                  TextSearchPath="Name" 
                                  CompletionMode="Contains"/>

Watermark

RadAutoCompleteView exposes Watermark property which is used to give guidance to the end user on what should be entered in the text input. The watermark text is displayed when the control is empty. You could also use the WatermarkTextColor property to define the Watermark text color of the component.

<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewWatermark" 
                                  ItemsSource="{Binding Source}" 
                                  TextSearchPath="Name" 
                                  Watermark="Enter name..."
                                  WatermarkTextColor="LightBlue"/>

Clear Button Visibility

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

NoResults Message

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

  • NoResultsMessage (string): Defines the message visualized when there are no suggestions found.
  • NoResultsTemplate (DataTemplate): Defines the template visualized when there are no suggestions found.
<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewNoResults" 
                                  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 AutoCompleteView to trigger the search after a certain number of letters is entered.

<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewSearchTreshold"
                                  ItemsSource="{Binding Source}"
                                  TextSearchPath="Name" 
                                  SearchThreshold="3" />

Show/Hide the SuggestionView

  • ShowSuggestionView (bool): Determine the visibility of the popup containing the search results of the AutoCompleteView.
  • SuggestionViewHeight (double): Defines the SuggestionViewHeight of the control.
  • SuggestionViewBackgroundColor: Defines the SuggestionViewBackgroundColor of the component.
<telerikInput:RadAutoCompleteView x:Name="autoCompleteViewSuggestionView" 
                                  ItemsSource="{Binding Source}" 
                                  TextSearchPath="Name"  
                                  ShowSuggestionView="True" 
                                  SuggestionViewHeight="100" 
                                  SuggestionViewBackgroundColor="LightBlue"/>

FilteredItems collection

FilteredItems bindable property allows you to access the collection containing the search results of the AutoCompleteView. The property can be used in scenarios where the search results are visualized at a different place or inside another container.

A sample Key Features example can be found in the AutoCompleteView/Features folder of the SDK Samples Browser application.

See Also

In this article
Not finding the help you need? Improve this article