能否在MudAutocomplete中集成MudHighlighter实现搜索关键词高亮？

当然可以通过MudHighlighter实现下拉项的搜索文本高亮，核心是利用MudAutocomplete的自定义ItemTemplate来集成组件，以下是具体可行方案：

方案一：集成MudHighlighter（官方组件推荐） #

通过自定义下拉项模板，将用户输入的搜索文本传递给MudHighlighter，就能自动高亮匹配内容。

修改后的完整代码示例：

<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)" @ref="autocompleteRef">
        <!-- 自定义下拉项模板，用MudHighlighter包裹显示文本 -->
        <ItemTemplate Context="item">
            <MudHighlighter SearchTerm="@autocompleteRef.Text" Text="@item.Name" />
        </ItemTemplate>
    </MudAutocomplete>
</EditForm>

@code {
    // 获取Autocomplete实例以读取当前搜索文本
    private MudAutocomplete<StateModel> autocompleteRef;
    private ChoiceModel choice = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(choice);
    }

    // 你的搜索逻辑
    private async Task<IEnumerable<StateModel>> SearchAsync(string searchText)
    {
        var allStates = GetSampleStates();
        return allStates.Where(s => s.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase));
    }

    // 你的CoerceValue逻辑
    private bool coerceValue(StateModel item)
    {
        return true;
    }

    // 模拟数据源
    private List<StateModel> GetSampleStates()
    {
        return new List<StateModel>
        {
            new() { Name = "California" },
            new() { Name = "Texas" },
            new() { Name = "New York" },
            new() { Name = "Florida" }
        };
    }

    // 替换为你实际的实体类
    public class StateModel
    {
        public string Name { get; set; }
    }

    public class ChoiceModel
    {
        public StateModel State { get; set; }
    }
}

关键细节： #

• 用@ref获取MudAutocomplete实例，通过autocompleteRef.Text拿到用户当前的搜索输入
• ItemTemplate中，MudHighlighter的Text绑定下拉项的显示字段（如item.Name），SearchTerm绑定搜索文本
• MudHighlighter默认忽略大小写匹配，可通过CaseSensitive="true"改为大小写敏感

方案二：手动实现高亮（无需额外组件） #

如果不想依赖MudHighlighter，可手动处理字符串，用HTML标签包裹匹配内容后通过MarkupString渲染：

<ItemTemplate Context="item">
    @((MarkupString)HighlightMatch(item.Name, autocompleteRef.Text))
</ItemTemplate>

@code {
    private string HighlightMatch(string text, string searchTerm)
    {
        if (string.IsNullOrEmpty(searchTerm))
            return text;
        
        var regex = new Regex(Regex.Escape(searchTerm), RegexOptions.IgnoreCase);
        return regex.Replace(text, match => $"<span style='background: #ffeb3b;'>{match.Value}</span>");
    }
}

注意： #

• 使用MarkupString需确保内容安全，避免XSS风险，建议对用户输入和数据源文本做转义处理

内容的提问来源于stack exchange，提问作者Granoffel