This library simplifies the integration of Tom Select into Blazor applications, providing access to options, methods, plugins, and events. A demo project showcasing common usages is included.
Diligence was taken to align the Blazor API with JS. Refer to the Tom Select documentation for details.
dotnet add package Soenneker.Blazor.TomSelect
@using Soenneker.Blazor.TomSelect
public void ConfigureServices(IServiceCollection services)
{
services.AddTomSelect();
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<script src="_content/Soenneker.Blazor.TomSelect/tomselectinterop.js"></script>
<TomSelect
TItem="Country" TType="string" OnItemAdd="OnItemAdd"
Data="@_countries"
TextField="@(item => item.Name)"
ValueField="@(item => item.Id.ToString())" @ref="_tomSelect" Items="_selectedCountries">
</TomSelect>
@code{
private TomSelect<Country, string> _tomSelect = default!;
private List<Country>? _selectedCountries;
private List<Country>? _countries;
protected override async Task OnInitializedAsync()
{
_countries = await Http.GetFromJsonAsync<List<Country>>("sample-data/countries.json");
}
private void OnItemAdd((string str, TomSelectOption obj) result)
{
Logger.LogInformation("OnItemAdd fired: Value: {value}", str);
}
private void LogSelectedItems()
{
foreach (Country item in _tomSelect.Items)
{
Logger.LogInformation("Selected item: {0}", item.Name);
}
}
}