如何在MudBlazor中实现虚拟化多列MudAutoComplete搜索？

一、支持虚拟化的多列实现 #

MudBlazor的MudAutoComplete原生支持虚拟化，同时可以通过自定义ItemTemplate实现多列布局，并且能直接绑定隐藏的ID字段。

核心实现要点： #

• 启用虚拟化：设置Virtualize="true"，配合ItemSize指定每条选项的高度（确保虚拟化计算准确）
• 多列布局：在ItemTemplate中使用MudGrid或MudFlex渲染多列内容
• 绑定隐藏ID：通过Value绑定ID字段，TextField指定前台显示的文本属性

示例代码： #

@using System.Collections.ObjectModel

<MudAutoComplete T="User" 
                 Label="搜索用户" 
                 @bind-Value="selectedUserId"
                 TextField="@(x => x.Name)"
                 SearchFunc="@SearchUsers"
                 Virtualize="true"
                 ItemSize="60" <!-- 根据实际行高调整 -->
                 Variant="Variant.Outlined">
    <ItemTemplate Context="user">
        <MudGrid>
            <MudItem xs="4">@user.Id</MudItem>
            <MudItem xs="4">@user.Name</MudItem>
            <MudItem xs="4">@user.Email</MudItem>
        </MudGrid>
    </ItemTemplate>
</MudAutoComplete>

@code {
    private int? selectedUserId;
    private ObservableCollection<User> Users { get; set; } = new();

    protected override void OnInitialized()
    {
        // 模拟初始化大量数据，用于测试虚拟化
        for (int i = 0; i < 10000; i++)
        {
            Users.Add(new User { Id = i, Name = $"用户{i}", Email = $"user{i}@example.com" });
        }
    }

    private Task<IEnumerable<User>> SearchUsers(string searchText)
    {
        if (string.IsNullOrWhiteSpace(searchText))
            return Task.FromResult(Users.AsEnumerable());
        
        var filtered = Users.Where(u => u.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase)
                                     || u.Email.Contains(searchText, StringComparison.OrdinalIgnoreCase));
        return Task.FromResult(filtered.AsEnumerable());
    }

    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

二、输入3个字符后触发搜索的备选方案 #

如果虚拟化场景下遇到兼容性问题，可以通过自定义搜索逻辑，限制仅当输入字符长度≥3时才执行搜索：

实现方式： #

在SearchFunc中判断输入文本的长度，不足3个字符时返回空集合；也可以结合DebounceInterval减少不必要的搜索请求。

示例代码： #

<MudAutoComplete T="User" 
                 Label="搜索用户" 
                 @bind-Value="selectedUserId"
                 TextField="@(x => x.Name)"
                 SearchFunc="@SearchUsersWithMinLength"
                 DebounceInterval="300" <!-- 防抖延迟，避免频繁触发 -->
                 Variant="Variant.Outlined">
    <ItemTemplate Context="user">
        <MudGrid>
            <MudItem xs="4">@user.Id</MudItem>
            <MudItem xs="4">@user.Name</MudItem>
            <MudItem xs="4">@user.Email</MudItem>
        </MudGrid>
    </ItemTemplate>
</MudAutoComplete>

@code {
    private int? selectedUserId;
    private ObservableCollection<User> Users { get; set; } = new();

    protected override void OnInitialized()
    {
        for (int i = 0; i < 10000; i++)
        {
            Users.Add(new User { Id = i, Name = $"用户{i}", Email = $"user{i}@example.com" });
        }
    }

    private Task<IEnumerable<User>> SearchUsersWithMinLength(string searchText)
    {
        // 仅当输入字符≥3时执行搜索
        if (string.IsNullOrWhiteSpace(searchText) || searchText.Length < 3)
            return Task.FromResult(Enumerable.Empty<User>());
        
        var filtered = Users.Where(u => u.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase)
                                     || u.Email.Contains(searchText, StringComparison.OrdinalIgnoreCase));
        return Task.FromResult(filtered.AsEnumerable());
    }

    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

补充说明： #

• 虚拟化功能依赖Virtualize组件，确保你的MudBlazor版本为v6及以上
• 多列布局可以根据需求调整MudGrid的断点或使用MudFlex实现更灵活的排版
• 绑定隐藏ID时，Value的类型要和模型中的ID类型一致

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