How to implement custom filtering in Blazor AutoComplete with multiple fields using predicate?

When implementing Blazor AutoComplete feature in your application, you may encounter a scenario where you need to filter the suggestions based on multiple fields. This article will guide you through the process of custom filtering using the DataManager predicate to filter by both text and value fields.

Custom Filtering with DataManager Predicate

To achieve custom filtering, you can utilize the DataManager predicate to filter the dropdown list by specific fields. In this example, filtered by CustomerID and ShipCountry.

Below is the code snippet that demonstrates how to set up the AutoComplete component with custom filtering:

<SfAutoComplete @ref=ddlObj TValue="string" AllowFiltering="true" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
    <AutoCompleteFieldSettings Text="CustomerID" Value="ShipCountry"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="OrderDetails" Filtering="CustomFiltering"></AutoCompleteEvents>
</SfAutoComplete>

@code {
    SfAutoComplete<string, OrderDetails> ddlObj { get; set; }

    async Task CustomFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
   {
    args.PreventDefaultAction = true;
    var predicate = new List<WhereFilter>
    {
        new WhereFilter { Condition = "or", Field = "CustomerID", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true },
        new WhereFilter { Condition = "or", Field = "ShipCountry", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }
    };
    var query = new Query().Where(WhereFilter.Or(predicate));
    query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
    await ddlObj.FilterAsync(this.ddlObj.DataSource, query);
   }

    public Query Query = new Query().Select(new List<string> { "CustomerID", "ShipCountry" }).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; }
    }
}

Sample

For further reference and to see the custom filtering in action, you can check out the provided sample:

• Syncfusion Blazor AutoComplete Playground Sample

By following the steps outlined in this article, you can successfully implement custom filtering in the Syncfusion Blazor AutoComplete component to enhance the user experience in your web applications.

Conclusion

We hope you enjoyed learning about how to implement custom filtering in Blazor AutoComplete with multiple fields using predicate.

You can refer to our Blazor AutoComplete feature tour page to know about its other ground breaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor AutoComplete example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor AutoComplete and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!