MudBlazor - Searchable MudSelect

Question

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

Loveliesbleeding

To my knowledge MudSelect does not support this. I looked for it, too, some time ago. I ended up using the ToStringFunc parameter of MudAutocomplete. Using that you can achieve everything you need. – Jemena

https://mcmap.net/q/1424456/-mudblazor-mudautocomplete-how-to-show-39-name-39-s-in-the-list-but-bind-an-id/12878692 this helped me it works well – Commonweal

Answer 1

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

Hardly

Answer 2

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.

Inept

Answer 3

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}")" />

Odont

Answer 4

To make a searchable MudSelect component in a Blazor application, you can create a custom component that inherits from MudSelect and overrides its FocusAsync() method. After that, you can add a search input within this custom component.

Step 1: Create a CustomMudSelect Component First, create a new Blazor component and name it CustomMudSelect. In this component, inherit from MudSelect and override the FocusAsync() method.

Step 2: Add a Search Input Inside CustomMudSelect include a search input in the component's markup. This will enable the user to filter items within the MudSelect component.

<i>
     
    public class CustomMudSelect<T>: MudSelect<T>
    {
      public override ValueTask FocusAsync()
      {
         return new ValueTask();
      }
    }

    <CustomMudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" 
    Required="true" RequiredError="An Assigned Group is required."@bind- 
    Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">

        <input class="form-control" placeholder="Search..." 
        @oninput="@((ChangeEventArgs e) => { searchText = 
        e.Value.ToString(); 
        StateHasChanged();})"/>
    
       @foreach (var group in Groups)
       {
             if (string.IsNullOrEmpty(searchText) || 
                 group.Name.Contains(searchText, 
                 StringComparison.OrdinalIgnoreCase)
                )
                {
                   <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
                }
           
       }
    </CustomMudSelect>


</i>

Math

Answer 5

You can use this package [MudBlazor.Extensions Nuget] (https://www.nuget.org/packages/MudBlazor.Extensions)

and then the best option in my case is to inherit MudExSelect like this

@using MudBlazor.Extensions.Options
@inherits MudExSelect<ProgramingSkill>
@Inherited()
@code {
    public override Func<ProgramingSkill, string> ToStringFunc { get; set; } = ItemNameRender;
    public override bool MultiSelection { get; set; } = true;
    
    protected RenderFragment Inherited() => builder => base.BuildRenderTree(builder);
    
    protected override Task<IList<ProgramingSkill>> GetAvailableItemsAsync(CancellationToken cancellation = default)
    {
        // Load data from server for example
        return Task.FromResult<IList<ProgramingSkill>>(new List<ProgramingSkill>
        {
            new() { Name = "C#"},
            new() { Name = "C++"},
            new() { Name = "C"},
            new() { Name = "Objective-C"},
            new() { Name = "Swift"},
            new() { Name = "TypeScript"},
            new() { Name = "JavaScript"},
            new() { Name = "VisualBasic"},
            new() { Name = "Pascal"}
        });
    }
    private static string ItemNameRender(ProgramingSkill item) => $"{item.Name}";
}

A sample demo can be found here

Perrie