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, we can utilize the DataManager predicate to filter the dropdown list by specific fields. In this example, we will filter 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

I 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 feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor AutoComplete example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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 portalw. We are always happy to assist you!