How to filter data in Blazor ListBox
14 Aug 20262 minutes to read
This example shows how to filter ListBox data based on input from an HTML <input> element. Bind the input element’s oninput event to a handler that filters the ListBox items based on the entered text. Within the event handler, use the FilterAsync method to update the ListBox items, ensuring that only those matching the input text are included. The Query class is used to define the filtering criteria.
This approach is useful when you want full control over the filter UI (for example, to place the search input outside the ListBox or apply custom styling). For the built-in filter bar, refer to Filtering in Blazor ListBox.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<label for="filter">Enter Text: </label>
<input type="text" id="filter" @oninput="FilterList" placeholder="Enter text to filter"/>
<SfListBox @ref="ListBoxRef" TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
<ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
@code {
private SfListBox<string[], VehicleData> ListBoxRef;
public List<VehicleData> Vehicles = new List<VehicleData> {
new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};
public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
}
private async Task FilterList(Microsoft.AspNetCore.Components.ChangeEventArgs e)
{
var inputValue = e.Value?.ToString() ?? string.Empty;
var query = new Query().Where("Text", "contains", inputValue, true);
await ListBoxRef.FilterAsync(Vehicles, query);
}
}