Filtering in Blazor AutoComplete Component

9 Dec 202211 minutes to read

The AutoComplete has built-in support to filter data items. The filter operation starts as soon as you start typing characters in the component.

Change the filter type

Determines on which filter type the component needs to be considered on search action. The available FilterType and its supported data types are:

Filter Type Description Supported Types
StartsWith Checks whether a value begins with the specified value. String
EndsWith Checks whether a value ends with specified value. String
Contains Checks whether a value contains with specified value. String

The following examples shows data filtering is done with the StartsWith type.

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

<SfAutoComplete TValue="string" TItem="OrderDetails"  Placeholder="Select a customerID" Query="@RemoteDataQuery" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">
    <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteFieldSettings  Value="CustomerID"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
    public class OrderDetails
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipName { get; set; }
        public string ShipCountry { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipAddress { get; set; }
    }
}

Filtering in Blazor AutoComplete

Filter item count

You can specify the filter suggestion item count using the SuggestionCount property of AutoComplete.

Refer to the following example to restrict the suggestion list item counts as 3.

@using Syncfusion.Blazor.Data

<SfAutoComplete TValue="string" TItem="OrderDetails"  Placeholder="Select a customerID" SuggestionCount=3 Query="@RemoteDataQuery" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">
    <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteFieldSettings  Value="CustomerID"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {

    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).RequiresCount();
    public class OrderDetails
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipName { get; set; }
        public string ShipCountry { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipAddress { get; set; }
    }
}

Filtering Blazor AutoComplete Items based on Count

Limit the minimum filter character

You can set the limit for the character count to filter the data on the AutoComplete. This can be done by setting the MinLength property to AutoComplete.

In the following example, the remote request doesn’t fetch the search data until the search key contains three characters.

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

<SfAutoComplete TValue="string" TItem="OrderDetails"  Placeholder="Select a customerID" MinLength=3 Query="@RemoteDataQuery" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">
    <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).RequiresCount();
    public class OrderDetails
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipName { get; set; }
        public string ShipCountry { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipAddress { get; set; }
    }
}

Filtering Blazor AutoComplete Items based on Character Count

Case sensitive filtering

Data items can be filtered either with or without case sensitivity using the DataManager. This can be done by setting the IgnoreCase property of AutoComplete.

The following sample depicts how to filter the data with case-sensitive.

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

<SfAutoComplete TValue="string" TItem="Country" Placeholder="Select a country" IgnoreCase=false DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {

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

    List<Country> LocalData = 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" },
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" },
        new Country() { Name = "Hong Kong", Code = "HK" },
    };
}

Custom filtering

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

@using Syncfusion.Blazor.Data

<SfAutoComplete TValue="string" @ref="autoObj" TItem="Country" Placeholder="e.g. Australia" AllowFiltering="true">
    <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Country" Filtering="OnFilter"></AutoCompleteEvents>
</SfAutoComplete>

@code {

    SfAutoComplete<string, Country> autoObj { get; set; }

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

        public string Code { get; set; }
    }

    List<Country> Country = 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" }
    };

    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 autoObj.FilterAsync(Country, query);
    }
}

Properties

FilterType

Determines which filter type, the component needs to be considered during search action.

Default value of FilterType is Contains, all the suggestion items which contain typed characters are listed in the suggestion popup.

Possible values are:

  • StartsWith - Checks whether the value begins with the specified value.
  • EndsWith - Checks whether the value ends with specified value.
  • Contains - Checks whether the value contains with specified value.

Click to refer the code for FilterType

Highlight

When set to true, highlight the searched characters on suggested list items.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Highlight="@Highlight">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" }
        };
    
        public bool Highlight { get; set; } = true;
    }

    Blazor AutoComplete with highlight property

    MinLength

    Allows you to set the minimum search character length, the search action will perform after typed minimum characters.

    Default value of MinLength is 1.

    Click to refer the code for MinLength

    SuggestionCount

    Supports the specified number of list items on the suggestion popup.

    Default value of SuggestionCount is 20.

    Click to refer the code for SuggestionCount

    Methods

    HighLightSearch(String, Boolean, FilterType, String)

    Highlight the searched characters on suggested list items.

    Declaration

    NOTE

    public string HighLightSearch(string textValue, bool ignoreCase, FilterType filtertype, string highLighText = null)

    Paramaters

    • textValue - highlight the list item.
    • ignoreCase - performing the search text based on casing.
    • filtertype - Determines on which filter type, the highlight text update on the text.
    • highLighText - Higlighted the char based on hightligh text and this is optional. If not provide the highlightText, it wil get the filter value.
  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete @ref="@AutoCompleteObj" TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
        <AutoCompleteFieldSettings Value="Name" />
           <AutoCompleteTemplates TItem="Country">
    
            <ItemTemplate Context="icontext">
    
                <div class="samplename"> @((MarkupString)AutoCompleteObj.HighLightSearch(icontext.Name, true, Syncfusion.Blazor.DropDowns.FilterType.Contains))</div>
    
            </ItemTemplate>
    
        </AutoCompleteTemplates>
    </SfAutoComplete>
    
    @code {
        SfAutoComplete<string, Country> AutoCompleteObj;
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" }
        };
    
    }

    Blazor AutoComplete with HighLightSearch method