MudBlazor - Searchable MudSelect

Viewed 2193

I'm using MudBlazor, specifically MudSelect. I want to display the Name property, but save the Id property in the Value. The following is working.

<MudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" Required="true" RequiredError="An Assigned Group is required."  @bind-Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">
    @foreach (var group in Groups)
    {
        <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
    }
</MudSelect>

But, as the number of options starts growing it makes sense to add a search field along the Select List. I don't know how to use that in MudSelect. And while using MudAutocomplete, which gives me a search function, I don't know how to associate the Id to the selected Name. And while, since my Name, is unique I can do some processing on the submit to get the Id, I want to prevent the extra processing

2 Answers

As far as I know, MudBlazor doesn't have dynamic data loading in MudSelect.

As mentioned here, you can use Virtualization MudBlazor to achieve maximum performance for large number of items.

Here is an example of virtualization in MudSelect with large number of data.

It seems like that they're not working on dynamic data for MudSelect, don't wait for that (at least for next months).

more info: You can also use virtualization for tables, like this.

I changed to an autocomplete, showing the top ten by default, then as the user types, the list auto filters to the top 10 containing the text entered.

 <MudAutocomplete T="SM.Role"
     Value="_employee.Role"
     Label="Role"
     SearchFunc="@EmployeeViewModel.SearchRole"
     ResetValueOnEmptyText="@false"
     CoerceText="@false"
     DebounceInterval="500"
     CoerceValue="@false"
     ValueChanged="@OnRoleSelectionChanged"
     AdornmentIcon="@Icons.Material.Filled.Search"
     AdornmentColor="Color.Primary"
     ToStringFunc="@(e => e == null ? null : $"{e.Name}")" />
Related