New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI AutoComplete Tokens Support

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

The Tokens Support feature exposes the following properties:

  • DisplayMode(Telerik.Maui.Controls.AutoCompleteDisplayMode)—Determines whether a single or multiple items are picked from the suggestion view. The default DisplayMode is Plain, for multiple selection you would need to set it to Tokens.
  • ShowMoreItems(bool)—Defines the visibility of the view that is used to represents more items. When ShowMoreItems is set to true and ShowMoreTemplate is set, the RadAutoComplete hides the tokens that are not on the first line and will show the hidden count. By default ShowMoreItems is true. If you want to hide the hidden count you should set the ShowMoreItems to false.
  • ShowMoreTemplate(DataTemplate)—Defines the template used to create show more view.

Tokens Collection

The AutoComplete control provides a readonly collection for the tokens - Tokens collection of type ObservableCollection<object>. When items are selected from the SuggestionView and DisplayMode is Tokens, these items are added to the Tokens collection. In order to track changes in the Tokens collection when items are added or removed you have to subscribe for the Tokens.CollectionChanged. For example:

this.autoComplete.Tokens.CollectionChanged;
private void Tokens_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{

}

Example

Here is an example how the RadAutoComplete Tokens feature works:

1. Create the needed business objects, for example type City with the following properties:

public class City
{
    public City() { }        
    public City(string name)
    {
        this.Name = name;
    }

    public string Name { get; set; }
}

2. Create a ViewModel with a collection of City objects:

public class CityViewModel
{
    public List<City> Source { get; set; }
    public CityViewModel()
    {
        this.Source = new List<City>()
          {
              new City("Madrid"),
              new City("Paris"),
              new City("Barcelona"),
              new City("New York"),
              new City("Budapest"),
              new City("Sofia"),
              new City("Palermo"),
              new City("Melbourne"),
              new City("London"),
              new City("Nagoya"),
              new City("Tokyo"),
              new City("Atlanta"),
              new City("Toronto"),
              new City("Athens"),
          };
    }
}

3. Use the following snippet to declare a RadAutoComplete in XAML:

<telerik:RadAutoComplete DisplayMode="Tokens"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Search Here..."
                         BackgroundColor="White">
    <telerik:RadAutoComplete.BindingContext>
        <local:CityViewModel/>
    </telerik:RadAutoComplete.BindingContext>
    <telerik:RadAutoComplete.ShowMoreTemplate>
        <DataTemplate>
            <Label Text="{Binding Path=., StringFormat='+{0} more'}" VerticalTextAlignment="Center" />
        </DataTemplate>
    </telerik:RadAutoComplete.ShowMoreTemplate>
    <telerik:RadAutoComplete.NoResultsTemplate>
        <DataTemplate>
            <Label Text="No match was found for the specific search. Please try again."/>
        </DataTemplate>
    </telerik:RadAutoComplete.NoResultsTemplate>
</telerik:RadAutoComplete>

Here is the result when ShowMoreTemplate is used:

AutoComplete Tokens Support

For Autocomplete Tokens example refer to the SDKBrowser Demo application.

See Also

In this article
Not finding the help you need?