Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MudBlazor - Searchable MudSelect

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

like image 459
Henrique Pombo Avatar asked Jun 19 '26 00:06

Henrique Pombo


2 Answers

You can use CodeBeam.MudBlazor.Extensions package. It has MudSelectExtended and has built-in search support. It also has MudComboBox to similar search functions.

Can try here https://codebeam-mudextensions.pages.dev/mudselectextended

like image 51
Mehmet Can Karagöz Avatar answered Jun 23 '26 05:06

Mehmet Can Karagöz


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.

like image 33
Navid Yazdi Avatar answered Jun 23 '26 07:06

Navid Yazdi