The Semantic Search mode of the AI Smart Box interprets user intent and matches related terms, synonyms, and contextual meanings rather than exact keywords. When users enter a search term, your implementation uses semantic matching techniques to return filter criteria that capture semantically related content.
For example, try searching for "workout essentials" in the demo below to look for records like "resistance bands set", "fitness guide", or "multivitamin tablets", even though none of these records contain the exact query. This intelligent matching is particularly valuable when users might not know the exact terminology used in your data.
The demo in this article uses a third-party service to implement semantic search for demonstration purposes. For production applications, evaluate and select semantic matching techniques that best suit your specific data characteristics and accuracy requirements.
The following example demonstrates Semantic Search mode in action:
The Semantic Search mode requires an implementation that analyzes query meaning and returns semantically relevant results. Unlike traditional keyword matching that looks for exact text, your semantic search implementation must analyze the intent behind user queries and recognize when different words express the same concept.
Generally, such capabilities rely on machine learning models that understand language patterns and conceptual relationships through natural language processing (NLP) techniques.
The typical workflow is:
semanticSearch event of the AI Smart Box fires with the query text.The demo above uses a third-party transformer model to generate vector embeddings that understand semantic relationships in the data. Other approaches include large language models (LLMs), entity recognition, synonym expansion, or hybrid methods that combine multiple techniques.
To implement Semantic Search in the AI Smart Box tool:
Add the <kendo-grid-smartbox-tool> component to your Grid toolbar with Semantic Search mode enabled:
<kendo-grid [kendoGridBinding]="customers">
<kendo-toolbar>
<kendo-grid-smartbox-tool [semanticSearchMode]="semanticSearchSettings">
</kendo-grid-smartbox-tool>
</kendo-toolbar>
</kendo-grid>Configure additional Semantic Search mode settings in your component if needed:
public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
enabled: true,
placeholder: 'Describe what you need...',
delay: 600,
history: {
size: 5,
timestampFormat: 'h:mm a'
}
};Handle the semanticSearch event to implement your semantic search logic:
<kendo-grid [kendoGridBinding]="customers">
<kendo-toolbar>
<kendo-grid-smartbox-tool
[semanticSearchMode]="semanticSearchSettings"
(semanticSearch)="onSemanticSearch($event)">
</kendo-grid-smartbox-tool>
</kendo-toolbar>
</kendo-grid>public async onSemanticSearch(event: GridSmartBoxSemanticSearchEvent): Promise<void> {
const query = event.searchValue;
// Generate embedding for the search query
const queryEmbedding = await this.semanticService.embed(query);
// Compare query embedding with pre-computed Grid data embeddings
const results = this.embeddedData
.map(item => ({
...item,
similarity: this.semanticService.cosineSimilarity(queryEmbedding, item.embedding)
}))
.filter(x => x.similarity > 0.35) // Apply similarity threshold
.sort((a, b) => b.similarity - a.similarity);
// Update Grid data with semantically similar results
this.gridData = results;
}Create a separate service to encapsulate the semantic matching mechanism. In the demo, the SemanticSearchService loads the transformer model, converts text into vector embeddings, and provides the cosine similarity calculation to compare vectors.
The Semantic Search mode provides the following configuration options to customize its behavior through the GridSmartBoxSemanticSearchSettings object:
You can use the delay property to control how long the AI Smart Box waits after the user stops typing before triggering the search. Since the semantic search logic may take time to process, consider using a longer delay to avoid triggering too many searches as users type. The default value is 700 milliseconds.
public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
enabled: true,
delay: 800 // Wait 800ms after user stops typing
};The placeholder property allows you to customize the placeholder text that appears in the AI Smart Box when Semantic Search mode is active. The placeholder text should communicate that this mode understands natural language and concepts, not just exact keywords.
public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
enabled: true,
placeholder: 'Describe what you need...'
};The history property configures query history specifically for Semantic Search mode, allowing users to access and reuse previous searches. The default history size is 5 queries, and the default timestamp format is 'HH:mm:ss'.
public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
enabled: true,
history: {
size: 5, // Keep last 5 searches
timestampFormat: 'h:mm a' // Show time in 12-hour format
}
};