Selection in .NET MAUI Autocomplete

18 Nov 201824 minutes to read

Prerequisites

Before using the SfAutocomplete, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Inputs

For step-by-step setup, refer to the Getting Started documentation.

Overview

The SfAutocomplete allows users to select a single item or multiple items from the drop-down. The selection mode is set by using the SelectionMode property. The supported values are Single and Multiple.

Properties

Property Type Default Description
SelectionMode AutocompleteSelectionMode Single Specifies single or multiple selection.
SelectedItem object null Gets or sets the currently selected item (single mode).
SelectedItems IList null Gets or sets the collection of selected items (multiple mode).
SelectedValue object null Gets or sets the value(s) of the selected item(s) based on SelectedValuePath.
SelectedValuePath string null The property path used to populate SelectedValue.
MultiSelectionDisplayMode AutocompleteMultiSelectionDisplayMode Token Specifies how selected items are displayed in multiple mode. Values: Token, Delimiter.
TokensWrapMode AutocompleteTokensWrapMode None Specifies how tokens are arranged when MultiSelectionDisplayMode is Token. Values: Wrap, None.
DelimiterText string , The character used to separate selected items in Delimiter mode.
IsClearButtonVisible bool true Gets or sets a value that indicates whether the clear button is shown.
IsDropDownOpen bool false Gets or sets a value that indicates whether the drop-down is open.

Events

Event Description
SelectionChanging Raised when the selection is about to change. Use the Cancel property of the event args to prevent the change.
SelectionChanged Raised after the selection has changed. Exposes the AddedItems and RemovedItems collections.

Single selection

The SfAutocomplete allows the user to type a value and then select an item from the drop-down. The selected item is exposed by the SelectedItem property.

<editors:SfAutocomplete x:Name="autocomplete"
                        ItemsSource="{Binding SocialMedias}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name" />
var viewModel = new SocialMediaViewModel();

SfAutocomplete autocomplete = new SfAutocomplete
{
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    ItemsSource = viewModel.SocialMedias
};
// ViewModel
public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }

    public SocialMediaViewModel()
    {
        this.SocialMedias = new ObservableCollection<SocialMedia>
        {
            new SocialMedia { Name = "Facebook", ID = 0 },
            new SocialMedia { Name = "Google Plus", ID = 1 },
            new SocialMedia { Name = "Instagram", ID = 2 },
            new SocialMedia { Name = "LinkedIn", ID = 3 },
            new SocialMedia { Name = "Skype", ID = 4 },
            new SocialMedia { Name = "Telegram", ID = 5 },
            new SocialMedia { Name = "Twitter", ID = 6 },
            new SocialMedia { Name = "WhatsApp", ID = 7 },
            new SocialMedia { Name = "YouTube", ID = 8 }
        };
    }
}

public class SocialMedia
{
    public string Name { get; set; }
    public int ID { get; set; }
}

The following image illustrates single selection in the SfAutocomplete:

Single selection in the SfAutocomplete

Multiple selection

The SfAutocomplete allows users to select multiple values from the drop-down by setting the SelectionMode property to Multiple.

The selected items can be retrieved or set programmatically by using the SelectedItems property.

You can choose how the selected items are displayed using the MultiSelectionDisplayMode property. The default value is Token. The supported values are:

<editors:SfAutocomplete x:Name="autocomplete"
                        SelectionMode="Multiple"
                        ItemsSource="{Binding SocialMedias}"
                        SelectedItems="{Binding SelectedItemsList}"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name" />
var viewModel = new SocialMediaViewModel();

SfAutocomplete autocomplete = new SfAutocomplete
{
    SelectionMode = AutocompleteSelectionMode.Multiple,
    ItemsSource = viewModel.SocialMedias,
    SelectedItems = viewModel.SelectedItemsList,
    DisplayMemberPath = "Name",
    TextMemberPath = "Name"
};
// ViewModel
public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }
    public ObservableCollection<SocialMedia> SelectedItemsList { get; set; }

    public SocialMediaViewModel()
    {
        this.SocialMedias = new ObservableCollection<SocialMedia>
        {
            new SocialMedia { Name = "Facebook", ID = 0 },
            new SocialMedia { Name = "Google Plus", ID = 1 },
            new SocialMedia { Name = "Instagram", ID = 2 },
            new SocialMedia { Name = "LinkedIn", ID = 3 },
            new SocialMedia { Name = "Skype", ID = 4 },
            new SocialMedia { Name = "Telegram", ID = 5