Tokens Support in .NET MAUI AutoComplete

With AutoComplete, you can enable users to search for and pick some items. These items appear as tokens that can 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 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 can 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. To track changes in the Tokens collection when items are added or removed you have to subscribe for the Tokens.CollectionChanged. For example:

• C#

this.autoComplete.Tokens.CollectionChanged;

• C#

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:

• C#

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:

• C#

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:

• 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:

For Autocomplete Tokens example refer to the SDKBrowser Demo application.