Searching in .NET MAUI ComboBox (SfComboBox)

4 May 20256 minutes to read

The ComboBox control provides rich text searching functionality. The TextSearchMode property of the ComboBox can be used to regulate how the control behaves when it receives user input.

Search based on member path

The DisplayMemberPath and TextMemberPath properties of ComboBox control specify the property path, by which the searching must be done when a custom data is bound to the ItemsSource property.

  • DisplayMemberPath - Specifies the property path whose value is displayed as text in the drop-down menu. The default value is string.Empty.

  • TextMemberPath - Specifies the property path whose value is used to perform searching based on user input received in the selection box portion of the ComboBox control. The default value is string.Empty. When TextMemberPath is null or string.Empty, searching will be performed based on DisplayMemberPath.

NOTE

DisplayMemberPath and TextMemberPath will be effective for the collection item that holds two or more properties in it.

NOTE

When both the DisplayMemberPath and TextMemberPath properties have a null or string.Empty value, searching will be performed based on the class name with namespace of the item.

Edit mode Searching based on TextMemberPath

In edit mode, searching will be performed based on the TextMemberPath property while entering the text into the selection box. When TextMemberPath is null or string.Empty, searching will be performed based on DisplayMemberPath.

<editors:SfComboBox x:Name="comboBox"
                    IsEditable="true"
                    ItemsSource="{Binding SocialMedias}"
                    TextMemberPath="ID"
                    DisplayMemberPath="Name" />
SfComboBox comboBox = new SfComboBox() 
    {
        IsEditable = true,
        ItemsSource = socialMediaViewModel.SocialMedias,
        TextMemberPath = "ID",
        DisplayMemberPath = "Name"
    };

The following image illustrates the result of the above code:

.NET MAUI ComboBox search based on TextMemberPath

NOTE

Auto appending of text is supported only in Editable mode and TextSearchMode property should be StartsWith.

Text Search Mode

The TextSearchMode property of the ComboBox can be used to regulate how the control behaves when it receives user input. The default text searching type is StartWith, ignoring accent and it is case insensitive. The available text search modes are:

  • StartsWith
  • Contains

Search with beginning text

Set the TextSearchMode property value to StartWith to search the matching items based on the starting text, and the first item which fits the user input in the drop-down list, will be highlighted.

<editors:SfComboBox x:Name="comboBox"
                    TextSearchMode="StartsWith"
                    ItemsSource="{Binding SocialMedias}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name" />
SfComboBox comboBox = new SfComboBox() 
    {
        TextSearchMode = ComboBoxTextSearchMode.StartsWith,
        ItemsSource = socialMediaViewModel.SocialMedias,
        TextMemberPath = "Name",
        DisplayMemberPath = "Name",
    };

The following image illustrates the result of the above code:

.NET MAUI ComboBox TextSearchMode StartsWith

Search with contains text

Set the TextSearchMode property value to Contains to search the matching items containing specific text, and the first item which fits the user input in the drop-down list, will be highlighted.

<editors:SfComboBox x:Name="comboBox"
                    IsEditable="True"
                    TextSearchMode="Contains"
                    ItemsSource="{Binding SocialMedias}"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name" />
SfComboBox comboBox = new SfComboBox() 
{
    IsEditable = true,
    TextSearchMode = ComboBoxTextSearchMode.Contains,
    ItemsSource = socialMediaViewModel.SocialMedias,
    TextMemberPath = "Name",
    DisplayMemberPath = "Name",
};

The following image illustrates the result of the above code:

.NET MAUI ComboBox TextSearchMode Contains

Prefix characters constraint

Instead of displaying suggestion list on every character entry, matches can be filtered and displayed after a few character entries. This can be done by MinimumPrefixCharacters property and its default value is 1.

<editors:SfComboBox x:Name="comboBox" 
                    IsFilteringEnabled="True"
                    IsEditable="True" 
                    ItemsSource="{Binding SocialMedias}"
                    MinimumPrefixCharacters="3"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name">
SfComboBox comboBox = new SfComboBox() 
{
    IsFilteringEnabled = true,
    IsEditable = true,
    ItemsSource = socialMediaViewModel.SocialMedias,
    MinimumPrefixCharacters = 3,
    TextMemberPath = "Name",
    DisplayMemberPath = "Name"
};

The following image illustrates the result of the above code.

.NET MAUI ComboBox MinimumPrefixCharacters