Filtering in Blazor ComboBox Component

30 Jan 20237 minutes to read

The ComboBox has built-in support to filter data items when AllowFiltering is enabled. The filter operation starts as soon as you start typing characters in the component.

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" TItem="EmployeeData" Placeholder="Select a customer" Query="@Query" AllowFiltering=true>
    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Employees" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
    <ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public Query Query = new Query();

    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
    }
}

Custom Filtering

The ComboBox component filter queries can be customized. You can also use your own filter libraries to filter data like Fuzzy search.

@using Syncfusion.Blazor.Data

<SfComboBox TValue="string" @ref="comboObj" TItem="Country" Placeholder="e.g. Australia" DataSource="@Countries" AllowFiltering="true">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Country" Filtering="OnFilter"></ComboBoxEvents>
</SfComboBox>

@code {

    SfComboBox<string, Country> comboObj { get; set; }

    public class Country
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Country> Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" }
    };

    List<Country> CountriesFiltered = new List<Country>
    {
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" }
    };

    private async Task OnFilter(FilteringEventArgs args)
    {
        args.PreventDefaultAction = true;
        var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "contains", value = args.Text, IgnoreCase = true });

        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();

        await comboObj.FilterAsync(CountriesFiltered, query);
    }
}

Prevent popup opening when filtering

To prevent the ComboBox dropdown from opening when filtering is applied, you can use the BeforeOpenEventArgs.Cancel argument in the BeforeOpenEventArgs. The BeforeOpenEventArgs.Cancel argument is a boolean value that can be set to true to cancel the dropdown opening, or false to allow the dropdown to open.

In the following example, the isTyped flag is used to track whether the filtering action is taking place. The OnFiltering method sets the flag to true when the filtering action starts, and the OnBeforeOpen method cancels the dropdown opening if the flag is set to true. Finally, the OnBeforeOpen method resets the flag to false to prepare for the next filtering action.

This will prevent the ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the ComboBox.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfComboBox ID="combobox" TValue="string" TItem="GameFields" AllowFiltering="true" PopupHeight="230px" Placeholder="Select a game"  DataSource="@Games" Width="300px"> 
    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="string" TItem="GameFields" OnOpen="OnOpen" Filtering="OnFilter"></ComboBoxEvents> 
</SfComboBox> 
 
@code{ 
    public class GameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    public List<GameFields> Games = new List<GameFields>() { 
        new GameFields(){ ID= "Game1", Text= "American Football" }, 
        new GameFields(){ ID= "Game2", Text= "Badminton" }, 
        new GameFields(){ ID= "Game3", Text= "Basketball" }, 
        new GameFields(){ ID= "Game4", Text= "Cricket" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10",Text= "Tennis"} 
        }; 
    public bool isTyped { get; set; } = false; 
    public async Task OnOpen(BeforeOpenEventArgs args) 
    { 
        if (this.isTyped) 
        { 
            args.Cancel = true; 
        } else 
        { 
            args.Cancel = false; 
        } 
        this.isTyped = false; 
    } 
    public void OnFilter(FilteringEventArgs args) 
    { 
        this.isTyped = true; 
    } 
}

Autofill

Specifies whether the input field of the control will automatically suggest and fill in the first matched item, as the user types based on the items in the control’s data source. If no matches are found, the input field will not be filled and no action will occur. Default value of Autofill is false.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" Autofill="@Autofill">
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public class Games
    {  
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
    public bool Autofill { get; set; } = true;
}