BlazorUI Demo

Autocomplete and multi-select

Search local or remote candidates and bind one or many values.

Autocomplete
View code
<EditForm Model="autocompleteModel" FormName="autocomplete-doc"><BuiAutocomplete TItem="AutocompleteCustomer" TValue="int?" Items="autocompleteCustomers" ValueSelector="x => x.Id" ToString="x => x.Name" Value="autocompleteModel.CustomerId" ValueChanged="value => autocompleteModel.CustomerId = value" ValueExpression="@(() => autocompleteModel.CustomerId)" Label="Customer" Placeholder="Start typing" /></EditForm>

@code {
    private readonly AutocompleteCustomer[] autocompleteCustomers = [new(1, "Ada Lovelace"), new(2, "Grace Hopper")];
    private AutocompleteModel autocompleteModel = new();
    private sealed record AutocompleteCustomer(int Id, string Name);
    private sealed class AutocompleteModel { public int? CustomerId { get; set; } }
}
Multiple selection
View code
<EditForm Model="multiSelectModel" FormName="multi-select-doc"><BuiMultiSelect TItem="MultiCustomer" TValue="int" Items="multiCustomers" ValueSelector="x => x.Id" ToString="x => x.Name" Value="multiSelectModel.CustomerIds" ValueChanged="value => multiSelectModel.CustomerIds = value" ValueExpression="@(() => multiSelectModel.CustomerIds)" Label="Customers" /></EditForm>

@code {
    private readonly MultiCustomer[] multiCustomers = [new(1, "Ada Lovelace"), new(2, "Grace Hopper"), new(3, "Katherine Johnson")];
    private MultiSelectModel multiSelectModel = new();
    private sealed record MultiCustomer(int Id, string Name);
    private sealed class MultiSelectModel { public IReadOnlyCollection<int> CustomerIds { get; set; } = []; }
}