| layout | post |
|---|---|
| title | AI-Powered Smart filtering in SfCombobox Control | Syncfusion® |
| description | Learn about how to implement AI-powered Smart filtering using Syncfusion® .NET MAUI Combobox control(SfCombobox). |
| platform | maui |
| control | SfCombobox |
| documentation | ug |
This document will walk you through the implementation of an advanced filter functionality in the Syncfusion .NET MAUI ComboBox control. The example leverages the power of Azure OpenAI for an intelligent, AI-driven filter experience.
First, ensure you have access to Azure OpenAI and have created a deployment in the Azure portal.
If you don’t have access, please refer to the create and deploy Azure OpenAI service guide to set up a new account.
Note down the deployment name, endpoint URL, and API key.
we’ll use the Azure.AI.OpenAI NuGet package from the NuGet Gallery. So, before getting started, install the Azure.AI.OpenAI NuGet package in your .NET MAUI app.
In your base service class (AzureBaseService), initialize the OpenAIClient. Replace the Endpoint, DeploymentName, Key with actual values from your Azure OpenAI resource.
This creates a chat client using your endpoint, API key, and deployment name. It’s stored in the Client property for use in other methods.
ComboBoxAzureAIService use this Client to send prompts and receive completions.
In the GetCompletion method, we will construct the prompt and send it to the Azure OpenAI Service. The ChatHistory helps maintain context but is cleared for each new prompt in this implementation to ensure each search is independent.
The .NET MAUI ComboBox control allows you to apply custom filter logic to suggest items based on your specific filter criteria by utilizing the FilterBehavior property, which is the entry point for our natural language filtering logic.
Step 1: Create a new business model to filter food names.
Step 2: Connecting the Custom Filter to Azure OpenAI
Implement the GetMatchingIndexes method from the interface. This method is the heart of the custom filter. It is invoked every time the text in the ComboBox control changes.
The logic within GetMatchingIndexes intelligently perform an online AI filter based on the availability of Azure credentials.
To get accurate and structured results from the AI, we must provide a detailed prompt. This is constructed inside the
FilterItemsUsingAzureAI method.
The FilterItemsUsingAzureAI method uses prompt engineering to instruct the AI on how to filter the results, including asking it to handle spelling mistakes and providing the response in a clean format.
Step:3 Applying Custom Filtering to ComboBox
Applying custom filtering to the ComboBox control by using the FilterBehavior property.
The following image demonstrates the output of the above AI-based filter using a custom filtering sample.
