Filtering in ListBox

18 Dec 20233 minutes to read

The ListBox 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 search box. Default value of AllowFiltering is false.

The following code demonstrates the filtering functionality in ListBox component.

@using Syncfusion.Blazor.DropDowns

<SfListBox TValue="string[]" DataSource="@CountryData" TItem="CountryCode" AllowFiltering=true>
  <ListBoxFieldSettings Text="Name" Value="Code" />
</SfListBox>

@code {
    public List<CountryCode> CountryData = new List<CountryCode> {
        new CountryCode{ Name = "Australia", Code = "AU" },
        new CountryCode{ Name = "Bermuda", Code = "BM" },
        new CountryCode{ Name = "Canada", Code = "CA" },
        new CountryCode{ Name = "Cameroon", Code = "CM" },
        new CountryCode{ Name = "Denmark", Code = "DK" },
        new CountryCode{ Name = "France", Code = "FR" },
        new CountryCode{ Name = "Finland", Code = "FI" },
        new CountryCode{ Name = "Germany", Code = "DE" },
        new CountryCode{ Name = "Hong Kong", Code = "HK" }
    };
    public class CountryCode {
      public string Name { get; set; }
      public string Code { get; set; }
    }
}

Filter type

You can use FilterType property to specify on which filter type needed to be considered on the search action of the component. The available FilterType and its supported data types are:

FilterType	Description
StartsWith	Checks whether a value begins with the specified value.
EndsWith	Checks whether a value ends with specified value.
Contains	Checks whether a value contained with specified value.

In the following example, EndsWith filter type has been mapped to the FilterType property.

@using Syncfusion.Blazor.DropDowns

<SfListBox TValue="string" TItem="Games" FilterType="FilterType.EndsWith" AllowFiltering=true DataSource="@LocalData">
  <ListBoxFieldSettings Value="ID" Text="Game"></ListBoxFieldSettings>
</SfListBox>

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