Highlighting matched text

11 Jun 20242 minutes to read

Highlighting matched text in .NET MAUI SfAutocomplete

Highlight matching characters in a suggestion list to pick an item with more clarity. There are two ways to highlight the matching text:

• First Occurrence

• Multiple Occurrence

The text highlight can be indicated with various customizing styles by enabling the below properties. They are

• HighlightedTextColor - sets the color of the highlighted text for differentiating the highlighted characters.

• HighlightTextFontAttributes - sets the FontAttributes of the highlighted text.

First Occurrence

It highlights the first position of the matching characters in the suggestion list.

XAML

<editors:SfAutocomplete x:Name="autocomplete"
			     HeightRequest = "40"
			     WidthRequest="300"
			     ItemsSource="{Binding SocialMedias}"
			     TextHighlightMode="FirstOccurrence"
			     HighlightedTextColor="Red"
			     HighlightedTextFontAttributes="Bold"/>

C#

SfAutocomplete autoComplete = new SfAutocomplete() 
    {
         HeightRequest = 40,
         WidthRequest=300,
         TextHighlightMode = OccurrenceMode.FirstOccurrence,
         HighlightedTextColor = Colors.Red,
         HighlightedTextFontAttributes = FontAttributes.Bold,
    };

Multiple Occurrence

It highlights the matching character that are present everywhere in the suggestion list for Contains case in TextSearchMode.

XAML

<editors:SfAutocomplete x:Name="autocomplete"
		             HeightRequest = "40"
		             WidthRequest="300"
		             ItemsSource="{Binding SocialMedias}"
		             TextHighlightMode="MultipleOccurrence"
		             HighlightedTextColor="Red"
		             HighlightedTextFontAttributes="Bold"
		             TextSearchMode="Contains"/>

C#

SfAutocomplete autoComplete = new SfAutocomplete() 
    {
         HeightRequest = 40,
         WidthRequest=300,
         TextSearchMode = AutocompleteTextSearchMode.Contains,
         TextHighlightMode = OccurrenceMode.MultipleOccurrence,
         HighlightedTextColor = Colors.Red,
         HighlightedTextFontAttributes = FontAttributes.Bold,
    };