Is it possible to use the Highlighter component in MudAutocomplete or another way to highlight typed letters in search suggestions?

Question

I am currently working on a project that utilizes the MudBlazor framework, specifically the MudAutocomplete component for search functionality. I would like to enhance the user experience by highlighting the letters that the user has typed in the search suggestions.

After exploring the MudBlazor documentation, I came across the Highlighter component, which seems to be designed for this purpose. However, I am unsure if it can be directly integrated into the MudAutocomplete component.

My goal is to dynamically highlight the characters that match the user's input in the dropdown list of suggestions. Has anyone successfully used the Highlighter component within MudAutocomplete, or is there an alternative approach to achieve this highlighting effect?

Here's a snippet of my current MudAutocomplete implementation:

<EditForm EditContext="editContext">
    <DataAnnotationsValidator />
    <MudAutocomplete Label="Help search ..." @bind-Value="choice.State" Required="false"
                     SearchFunc="@SearchAsync" Immediate="true" CoerceValue="@coerceValue" ResetValueOnEmptyText="true"
                     AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary"
                     For="@(() => choice.State)">
                     <MudHighlighter></MudHighlighter>
                 </MudAutocomplete>
</EditForm>

If anyone has suggestions, examples, or insights on how to incorporate the Highlighter component or achieve similar highlighting functionality in the MudAutocomplete dropdown, I would greatly appreciate your assistance.

Thank you in advance for your help!

Answer 1

You can use the ItemTemplate to modify the search result list presentation.

Also note that I'm using MudAutocomplete's Text parameter because that is the property that deals with the users character input.

<MudAutocomplete T="string" Label="US States" SearchFunc="@Search1" 
    @bind-Value="value1"
    @bind-Text="@searchInputText" >
    <ItemTemplate Context="e">                          
        <MudText>
            <MudHighlighter Text="@e" HighlightedText="@searchInputText" />
        </MudText>
    </ItemTemplate>
</MudAutocomplete>

MudBlazor Snippet