Filtering in Blazor AutoComplete

29 Nov 202424 minutes to read

The AutoComplete 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.

Local data

The following code demonstrates the filtering functionality with local data in the AutoComplete component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" Placeholder="Select a country" AllowFiltering="true" DataSource="@Countries" Width="300px">
    <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>
</SfAutoComplete>

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

    private 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" },
        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" },
        new Country() { Name = "India", Code = "IN" },
        new Country() { Name = "Italy", Code = "IT" },
        new Country() { Name = "Japan", Code = "JP" },
        new Country() { Name = "Mexico", Code = "MX" },
        new Country() { Name = "Norway", Code = "NO" },
        new Country() { Name = "Poland", Code = "PL" },
        new Country() { Name = "Switzerland", Code = "CH" },
        new Country() { Name = "United Kingdom", Code = "GB" },
        new Country() { Name = "United States", Code = "US" },
    };
}

Blazor AutoComplete with local data filtering

Remote data

For Remote data, each key press, filter action request is made at the server end.

The below code demonstrates the filtering functionality with ODataAdaptor in the AutoComplete component with help of Query property.

CSHTML

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

<SfAutoComplete TValue="string" TItem="OrderDetails" Placeholder="Select a customer" AllowFiltering=true Query="@Query" @bind-Value="@OrderValue" Width="300px">
    <SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public string OrderValue { get; set; } = "TOMSP";
    public Query Query = new Query().Select(new List<string> { "CustomerID", "OrderID" }).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; }
    }
}

Blazor AutoComplete with Remote Data filtering

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, StartsWith filter type has been mapped to the FilterType property.

CSHTML

@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://blazor.syncfusion.com/services/production/api/Orders" Adaptor="Adaptors.WebApiAdaptor" 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; }
    }
}

Blazor AutoComplete with Filter Type

Minimum length

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 does not fetch the search data until the search key contains three characters.

CSHTML

@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://blazor.syncfusion.com/services/production/api/Orders" Adaptor="Adaptors.WebApiAdaptor" 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

Multi column filtering

In the built-in Syncfusion^® Blazor theme files, support for multi column can be enabled by adding e-multi-column class in the CssClass property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" Width="300px" TItem="Countries" Placeholder="e.g. Australia" PopupHeight="200px" CssClass="e-multi-column" DataSource="@Country" AllowFiltering="true">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
    <AutoCompleteTemplates TItem="Countries">
        <HeaderTemplate>
            <table><tr><th>Name</th><th>Position</th></tr></table>
        </HeaderTemplate>
        <ItemTemplate>
            <table>
                <tbody>
                    <tr>
                        <td>@((context as Countries).Name)</td>
                        <td>@((context as Countries).Job)</td>
                    </tr>
                </tbody>
            </table>
        </ItemTemplate>
    </AutoCompleteTemplates>
</SfAutoComplete>
@code {
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public string Job { get; set; }

    }
    List<Countries> Country = new List<Countries>
    {
       new Countries() { Name = "Australia", Code = "AU",Job= "Team Lead" },
        new Countries() { Name = "Bermuda", Code = "BM",Job="Developer"  },
        new Countries() { Name = "Canada", Code = "CA",Job="CEO"  },
        new Countries() { Name = "Cameroon", Code = "CM" ,Job="HR" },
        new Countries() { Name = "Denmark", Code = "DK",Job="Product Manager"  },
        new Countries() { Name = "France", Code = "FR",Job="Developer"  },
        new Countries() { Name = "Finland", Code = "FI",Job="Team Lead"  },
        new Countries() { Name = "Germany", Code = "DE",Job="Product Manager"  },
        new Countries() { Name = "Greenland", Code = "GL",Job="Developer"  },
        new Countries() { Name = "Hong Kong", Code = "HK",Job="CEO"  },
        new Countries() { Name = "India", Code = "IN",Job="HR"  },
        new Countries() { Name = "Italy", Code = "IT",Job="Team Lead"  },
        new Countries() { Name = "Japan", Code = "JP",Job="Developer"  },
        new Countries() { Name = "Mexico", Code = "MX",Job="Product Manager"  },
        new Countries() { Name = "Norway", Code = "NO",Job="HR"  },
        new Countries() { Name = "Poland", Code = "PL",Job="Team Lead"  },
        new Countries() { Name = "Switzerland", Code = "CH",Job="Product Manager"  },
        new Countries() { Name = "United Kingdom", Code = "GB",Job="CEO"  },
        new Countries() { Name = "United States", Code = "US",Job="Developer"  },
    };
}

Blazor AutoComplete with Multi Column filtering

You can achieve multiple column(field) filtering by passing the List of predicates to the And or Or methods of WhereFilters.

CSHTML

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Data;
@using System.IO

<SfAutoComplete @ref="autoObj" AllowFiltering="true" Placeholder="Select a value" TValue="Moc" TItem="Moc" DataSource="@data" CssClass="e-multi-column">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents Filtering="OnFiltering" TValue="Moc" TItem="Moc"></AutoCompleteEvents>
    <AutoCompleteTemplates TItem="Moc">
        <HeaderTemplate>
            <table><tr><th>ID</th><th>Text</th></tr></table>
        </HeaderTemplate>
        <ItemTemplate Context="itemContext">
            <table>
                <tbody>
                    <tr>
                        @if (!string.IsNullOrEmpty((itemContext as Moc).ID))
                        {
                            <td><span>@((itemContext as Moc).ID)</span></td>
                            <td><span>@((itemContext as Moc).Text)</span></td>
                        }
                    </tr>
                </tbody>
            </table>
        </ItemTemplate>
    </AutoCompleteTemplates>
</SfAutoComplete>

@code {
    SfAutoComplete<Moc, Moc> autoObj;
    public Query query { get; set; }
    public class Moc
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Moc> data = new List<Moc>
    {
      new Moc() { ID= "12H", Text= "American Football" },
      new Moc() { ID= "14G", Text= "Badminton" },
      new Moc() { ID= "17F", Text= "Basketball" }
    };
    public async Task OnFiltering(FilteringEventArgs args)
    {
        args.PreventDefaultAction = true;
        var orWhere = WhereFilter.Or(new List<WhereFilter> {
            new WhereFilter() { Field = "Text", Operator = "contains", value = args.Text, IgnoreCase = true },
            new WhereFilter() { Field = "ID", Operator = "contains", value = args.Text, IgnoreCase = true }
        });
        var query = new Query().Where(orWhere);
        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
        await autoObj.FilterAsync(data, query);
    }
}

Blazor AutoComplete with Multi Column filtering

Case sensitive filtering

The Data items can be filtered with or without case sensitivity using the DataManager. This can be done by passing the fourth optional parameter IgnoreCase of the Where clause.

The following example shows how to perform case-sensitive filter.

CSHTML

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

<SfAutoComplete TValue="string" TItem="Country" Placeholder="Select a country" DataSource="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 using Filtering event. You can also filter the text in multiple columns in the data source.

CSHTML

@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);
    }
}

Suggestion 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.

CSHTML

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

<SfAutoComplete TValue="string" TItem="OrderDetails"  Placeholder="Select a customerID" SuggestionCount=3 Query="@RemoteDataQuery" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">
    <SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" Adaptor="Adaptors.WebApiAdaptor" 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

AutoComplete with google search result

The Blazor AutoComplete component offers Google-like search suggestions. This functionality simulates the behavior of conducting a Google search with each keypress, displaying relevant results in the suggestion list.

RAZOR

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns;
@using System.Net;
@using System.Text.Json;

<SfAutoComplete @ref="AutoCompleteRef" Placeholder="Search something" TValue="string" TItem="GoogleSearch" Width="500px">
    <AutoCompleteFieldSettings Value="SuggestionText" />
    <AutoCompleteEvents TItem="GoogleSearch" TValue="string" Filtering="@OnCustomFiltering" />
</SfAutoComplete>
@code {
    SfAutoComplete<string, GoogleSearch> AutoCompleteRef { get; set; }
    static readonly HttpClient client = new HttpClient();
    class GoogleSearch
    {
        public string SuggestionText { get; set; } = String.Empty;
    }
    private async Task OnCustomFiltering(FilteringEventArgs args)
    {
        var suggestions = new List<GoogleSearch>();
        var url = "https://suggestqueries.google.com/complete/search?client=firefox&q=" + args.Text;

        var response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode();
        using (var stream = await response.Content.ReadAsStreamAsync())
        using (var reader = new StreamReader(stream))
        {
            var result = reader.ReadToEnd();
            var json = JsonDocument.Parse(result);
            var array = json.RootElement.EnumerateArray();
            foreach (var item in array.Skip(1).Take(1).ToList())

            {
                foreach (var suggestion in item.EnumerateArray())
                {
                    suggestions.Add(new GoogleSearch { SuggestionText = suggestion.GetString() });
                }
            }
        }
        await AutoCompleteRef.FilterAsync(suggestions);
    }
}

Highlighting Search character using property

You can highlight the search text in the suggested list items of the autocomplete component by using the Highlight property. When set to true, it will highlight the characters that match the search query in the 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

Highlighting Search character using method

You can highlight the search text in the suggested list items of the autocomplete component by using the HighLightSearch method. It accepts several arguments, including textValue, ignoreCase, filtertype and highLighText. When called, it will highlight the characters that match the search query in the list items.”

textValue - The text to be highlighted in the list item.
ignoreCase - A boolean value which when set to true performs the search text based on casing.
filterType - Determines on which filter type the highlight text is updated on the text.
highlightText - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text.”

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