CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Components/LibSelector.razor

<div class="d-flex flex-row bd-highlight mt-2">
    <div style="padding-right:5px;">
        Lobrary (@Libraries.Count) :
    </div>
    <Select2 class="flex-fill" TItem="KeyValuePair<string,Library>"
             TSource="IReadOnlyCollection<KeyValuePair<string,Library>>"
             IdSelector="c => c.Key"
             TextSelector="@(c =>c.Value.Name+" | Disc: ("+c.Value.Discs.Count+")")"
             FilterFunction="FilterLibrary"
             GetElementById="async (items, id, token) => items.FirstOrDefault(q=>q.Key==id)"
             Datasource="Libraries.OrderBy(p=>p.Key).ToArray()"
             Value="@SelectedLibs"
             Multiselect="false"
             OnValueChanged="OnValueChanged" />
</div>

@code {
    [Parameter,Required]
    public IDictionary<string, Library> Libraries{ get; set; }

    [Parameter, Required]
    public List<KeyValuePair<string, Library>> SelectedLibs { get; set; } = new();

    [Parameter] public EventCallback OnValueChanged { get; set; } = EventCallback.Empty;

    private async Task<List<KeyValuePair<string, Library>>> FilterLibrary(IReadOnlyCollection<KeyValuePair<string, Library>> source, string input, CancellationToken ct)
    {
        var result = new List<KeyValuePair<string, Library>>();

        foreach (var item in source.Where(p => p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
        foreach (var item in source.Where(p => !p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase) && p.Value.Name.Contains(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);

        return result;
    }
}