Highlighting Matched Text in .NET MAUI Autocomplete

18 Nov 20189 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

You can highlight the matching characters in each suggestion of the SfAutocomplete drop-down to help users identify the matching suggestion. There are two highlight modes:

  • FirstOccurrence - highlights the first match in each suggestion.
  • MultipleOccurrence - highlights every match in each suggestion.

Use the following properties to customize the appearance of the highlighted text:

  • HighlightedTextColor - the color applied to the highlighted characters.
  • HighlightedTextFontAttributes - the font attributes applied to the highlighted characters (None, Bold, Italic, or Bold, Italic).

Properties

Property Type Default Description
TextHighlightMode OccurrenceMode None Specifies whether the first match or every match is highlighted.
HighlightedTextColor Color Colors.Blue Gets or sets the color of the highlighted text.
HighlightedTextFontAttributes FontAttributes None Gets or sets the font attributes of the highlighted text.
TextSearchMode AutocompleteTextSearchMode StartsWith Specifies how the input text is matched against the suggestion list. MultipleOccurrence requires Contains.

First Occurrence

Set TextHighlightMode to FirstOccurrence to highlight the first match in each suggestion.

<editors:SfAutocomplete x:Name="autocomplete"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        ItemsSource="{Binding SocialMedias}"
                        TextHighlightMode="FirstOccurrence"
                        HighlightedTextColor="Red"
                        HighlightedTextFontAttributes="Bold" />
SfAutocomplete autocomplete = new SfAutocomplete()
{
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    ItemsSource = new SocialMediaViewModel().SocialMedias,
    TextHighlightMode = OccurrenceMode.FirstOccurrence,
    HighlightedTextColor = Colors.Red,
    HighlightedTextFontAttributes = FontAttributes.Bold
};

public class SocialMedia
{
    public string Name { get; set; }
}
// 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 first-occurrence highlighting in the SfAutocomplete drop-down:

First occurrence highlighting in the SfAutocomplete drop-down

Multiple Occurrence

Set TextHighlightMode to MultipleOccurrence to highlight every match in each suggestion. This mode requires TextSearchMode to be set to Contains; otherwise, only the first match is highlighted.

<editors:SfAutocomplete x:Name="autocomplete"
                        DisplayMemberPath="Name"
                        TextMemberPath="Name"
                        ItemsSource="{Binding SocialMedias}"
                        TextHighlightMode="MultipleOccurrence"
                        HighlightedTextColor="Red"
                        HighlightedTextFontAttributes="Bold"
                        TextSearchMode="Contains" />
SfAutocomplete autocomplete = new SfAutocomplete()
{
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    ItemsSource = new SocialMediaViewModel().SocialMedias,
    TextHighlightMode = OccurrenceMode.MultipleOccurrence,
    HighlightedTextColor = Colors.Red,
    HighlightedTextFontAttributes = FontAttributes.Bold,
    TextSearchMode = AutocompleteTextSearchMode.Contains
};
// 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 multiple-occurrence highlighting in the SfAutocomplete drop-down:

Multiple occurrence highlighting in the SfAutocomplete drop-down

See also