The Coveo platform provides a powerful, customizable search experience. However, making advanced features like Partial Match and Query Syntax user-friendly can significantly improve users’ interactions with your search interface. This blog focuses on how to implement these toggles and integrate them seamlessly with the Coveo Query Pipeline.
Why Partial Match and Query Syntax?
- Partial Match: This Coveo query parameter ensures results include documents that match a subset of the user’s query terms. It’s particularly useful for long-tail searches or cases where exact matches are unlikely.
- Query Syntax: This feature enables advanced search operators (e.g., AND, OR) in the user’s query, giving power users better control over their search results.
Adding checkboxes for these features lets users toggle them on or off dynamically, tailoring the search experience to their preferences.
Implementation Overview
Step 1: Add Toggles to the UI
We introduced two simple checkboxes to toggle Partial Match and Query Syntax in real time. Here’s the HTML structure:
<div class="container"> <label class="checkbox-label"> <input type="checkbox" id="partialMatchCheckbox" onclick="togglePartialMatch()" /> Partial Match </label> <label class="checkbox-label"> <input type="checkbox" id="querySyntaxCheckbox" onclick="toggleQuerySyntax()" /> Query Syntax </label> </div>
.container {
display: flex;
gap: 10px;
}
.checkbox-label {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
Step 2: Implement Toggle Logic
Use JavaScript to dynamically update the query context and trigger changes. The toggles were made functional by leveraging the Coveo Search API and the buildingQuery event, allowing real-time updates to the query context based on the states of the checkboxes.
// Root element for Coveo search interface
const root = document.querySelector("#search");
/**
* Toggles the Partial Match context parameter based on the checkbox state.
*/
function togglePartialMatch() {
const partialMatchCheckbox = document.querySelector("#partialMatchCheckbox");
if (partialMatchCheckbox) {
const isActive = partialMatchCheckbox.checked;
if (isActive) {
console.log("Partial Match Enabled");
// Listen to the buildingQuery event and update the query context
Coveo.$$(root).on("buildingQuery", (e, args) => {
args.queryBuilder.addContext({
partialMatch: isActive
});
});
} else {
console.log("Partial Match Disabled");
Coveo.$$(root).on("buildingQuery", (e, args) => {
args.queryBuilder.addContext({
partialMatch: isActive
});
});
}
} else {
console.error("Partial Match Checkbox not found!");
}
}
/**
* Toggles the Query Syntax context parameter based on the checkbox state.
*/
function toggleQuerySyntax() {
const querySyntaxCheckbox = document.querySelector("#querySyntaxCheckbox");
if (querySyntaxCheckbox) {
const isActive = querySyntaxCheckbox.checked;
if (isActive) {
console.log("Query Syntax Enabled");
Coveo.$$(root).on("buildingQuery", (e, args) => {
args.queryBuilder.addContext({
enableQuerySyntax: isActive
});
});
} else {
console.log("Query Syntax Disabled");
Coveo.$$(root).on("buildingQuery", (e, args) => {
args.queryBuilder.addContext({
enableQuerySyntax: isActive
});
});
}
} else {
console.error("Query Syntax Checkbox not found!");
}
}
Step 3: Configure Query Pipeline Rules
In the Coveo Admin Console, modify your query pipeline to respond to the context values sent from the front end.
Partial Match Configuration
Query Parameter: partialMatch
- Override Value: true
- Condition: Context[partialMatch] is true
Additional Overrides:
- partialMatchKeywords: Set to 3
- partialMatchThreshold: Set to 35%
Query Syntax Configuration
Query Parameter: enableQuerySyntax
- Override Value: true
- Condition: Context[enableQuerySyntax] is true.
Step 4: Detailed Flow for Context Parameters
- User Interaction: When a user checks the Partial Match or Query Syntax toggle, the respective JavaScript function (togglePartialMatch or toggleQuerySyntax) is triggered.
- Frontend Logic: The buildingQuery event dynamically updates the query context with parameters like partialMatch or enableQuerySyntax.
Example Context Update:{ "q": "example query", "context": { "partialMatch": true, "enableQuerySyntax": false } } - Backend Processing: The query, along with the updated context, is sent to the Coveo backend. The Query Pipeline evaluates the context parameters and applies corresponding rules, like enabling partialMatch or enableQuerySyntax.
- Dynamic Overrides: Based on the context values, overrides like partialMatchKeywords or partialMatchThreshold are applied dynamically.
- Real-Time Results: Updated search results are displayed to the user without requiring a page reload.
Benefits of This Approach
- Enhanced User Control: Allows users to tailor search results to their needs dynamically.
- Real-Time Updates: Search settings are updated immediately, with no reloads.
- Flexible Configuration: Query behavior can be adjusted via the Admin Console without modifying frontend code.
- Scalable: Easily extendable for other toggles or advanced features.
The Results
With these toggles in place, users can:
- Effortlessly switch between enabling and disabling Partial Match and Query Syntax.
- Experience improved search results tailored to their input style.
Partial Match Results:
Query Syntax Results:
Conclusion
Leveraging Coveo’s context and query pipeline capabilities can help you deliver a highly interactive and dynamic search experience. Combining the UI toggles and backend processing empowers users to control their search experience and ensures that results align with their preferences.
Implement this feature today and take your Coveo search interface to the next level!
Useful Links
About custom context | Coveo Machine Learning
PipelineContext | Coveo JavaScript Search Framework – Reference Documentation
Taking advantage of the partial match feature | Coveo Platform
