如何为MudAutocomplete实现虚拟化功能？

MudAutocomplete本身没有像MudSelect那样直接支持嵌套Virtualize组件，但可以通过自定义下拉内容模板的方式实现虚拟化，核心思路是利用DropDownContent替换默认下拉列表，在其中嵌入Blazor的Virtualize组件，同时配合过滤逻辑维护渲染的数据集。

完整实现示例 #

1. 后端逻辑（数据与过滤）

public class User
{
    public string Id { get; set; } = string.Empty;
    public string Name { get; set; } = string.Empty;
}

private List<User> _fullUserList = new();
private List<User> _filteredUsers = new();
private User? _selectedUser;
private string? _searchText;

protected override void OnInitialized()
{
    // 模拟大数据集（虚拟化的核心价值场景）
    _fullUserList = Enumerable.Range(1, 100000)
        .Select(i => new User { Id = i.ToString(), Name = $"用户{i}" })
        .ToList();
    _filteredUsers = _fullUserList.ToList();
}

private void UpdateFilteredUsers(string? searchText)
{
    if (string.IsNullOrWhiteSpace(searchText))
    {
        _filteredUsers = _fullUserList.ToList();
        return;
    }
    
    _filteredUsers = _fullUserList
        .Where(u => u.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase) 
                 || u.Id.Contains(searchText))
        .ToList();
}

2. 前端组件代码

<MudAutocomplete T="User"
                 @bind-Value="_selectedUser"
                 @bind-SearchText="_searchText"
                 Label="选择用户"
                 ToStringFunc="@(user => user != null ? $"{user.Id} - {user.Name}" : "")"
                 SearchFunc="@(async text => { UpdateFilteredUsers(text); return Task.CompletedTask; })">
    <DropDownContent>
        <!-- 固定下拉框最大高度，确保滚动容器生效 -->
        <div style="max-height: 350px; overflow-y: auto;">
            <Virtualize Items="_filteredUsers" Context="user">
                <MudAutocompleteItem T="User" Value="user">
                    @user.Id - @user.Name
                </MudAutocompleteItem>
            </Virtualize>
        </div>
    </DropDownContent>
</MudAutocomplete>

关键要点说明 #

• 自定义下拉模板：通过DropDownContent覆盖MudAutocomplete默认的下拉列表渲染逻辑，将Virtualize组件嵌入其中
• 过滤与虚拟化结合：通过SearchFunc监听搜索文本变化，实时更新_filteredUsers，确保Virtualize只渲染当前匹配的项，避免无效渲染
• 滚动容器设置：必须给Virtualize外层的div设置固定最大高度和overflow-y: auto，否则Virtualize无法检测到滚动事件，虚拟化功能失效
• 数据匹配逻辑：ToStringFunc用于将选中的User对象转换为显示文本，保证组件的正常显示逻辑

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