Add Dynamic Query Suggestions to Your Search Box in Coveo JS Framework

Posted 08/05/2014 by Akshay Sura

In almost every search implementation we had to add an auto suggestions for the search box. This job is made easy by using the Coveo JS Framework. You can achieve the basic functionality using the article found HERE.

But in most cases you do not want a set list of auto suggestions, rather you would want it to use the index to pull the list. Below is a standard implementation where we are pulling results from a Sitecore folder.

<div class="CoveoSearchInterface" id="productfinder">
<span class="CoveoTopFieldSuggestions"
data-field="<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("Auto Suggestion Keyword") %>"
data-header-title="Suggested Products"></span>
<div class="CoveoSearchBox" data-activate-omnibox="true"></div>
</div>

<script type="text/javascript">
var pathField = "<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("_Path") %>";
$(function () {
var productSearchInterface = $("#productfinder");
productSearchInterface.on("afterInitialization", function () {
productSearchInterface.on("newQuery", function (e, args) {
var currentKeyword = productSearchInterface.coveo("state", "q");
if (currentKeyword != "") {
window.location.href = productSearchPage + "?typ=product#q=" + encodeURIComponent(currentKeyword)
}
})
})
$('#productfinder').coveo('init', {
SearchInterface: {
autoTriggerQuery: false,
hideUntilFirstQuery: false,
enableHistory: false
},
TopFieldSuggestions: {
queryOverride: pathField + "=G44E5065B7EE4C1AA257D9440D3B30SS"
}
});
});
</script>

In order for us to make this a bit more dynamic, we need to identify the template or templates we want the results to come from, along with the field or fields which need to be searched. As an example, lets say we have a Product template with a field Product Name. When a user starts typing in to a product finder, we would like to search the index for all items which are based on the Product Template and we would match the search string against the Product Name field.

   <div class="CoveoSearchInterface" id="productfinder">
<span class="CoveoTopFieldSuggestions"
data-field="<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("Product Name") %>"
data-header-title="Suggested Products"></span>
<div class="CoveoSearchBox" data-activate-omnibox="true"></div>
</div>

<script type="text/javascript">
var pathField = "<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("_Path") %>";
var templateField = "<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("templatename") %>";
$(function () {
var productSearchInterface = $("#productfinder");
productSearchInterface.on("afterInitialization", function () {
productSearchInterface.on("newQuery", function (e, args) {
var currentKeyword = productSearchInterface.coveo("state", "q");
if (currentKeyword != "") {
window.location.href = productSearchPage + "?typ=product#q=" + encodeURIComponent(currentKeyword)
}
})
})
$('#productfinder').coveo('init', {
SearchInterface: {
autoTriggerQuery: false,
hideUntilFirstQuery: false,
enableHistory: false
},
TopFieldSuggestions: {
queryOverride: templateField  + "=Product"
}
});
});
</script>

In the above example, we are setting the template field to find Product Template and in the html markup we are are asking for Coveo to search in the Product Name field. 

All of this works great. But if you add in a multi-lingual website and want results from multiple templates and fields, here is how you do it:

<div class="CoveoSearchInterface" id="generalfinder">
<span class="CoveoTopFieldSuggestions"
data-field="<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("Products") %>"
data-header-title="Suggested Products"></span>
<span class="CoveoTopFieldSuggestions"
data-field="<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("Article Title") %>"
data-header-title="Suggested Articles"></span>
<span class="CoveoTopFieldSuggestions"
data-field="<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("Heading") %>"
data-header-title="Suggested Items"></span>
<div class="CoveoSearchBox" data-activate-omnibox="true"></div>
</div>

<script type="text/javascript">
var templateField = "<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("templatename") %>";

    var languageField = "<%= Coveo.UI.SitecoreUtilities.ToCoveoFieldName("language") %>";

    var currentLang = "<%= Model.CultureName %>";

$('#generalfinder').coveo('init', {
SearchInterface: {
autoTriggerQuery: false,
hideUntilFirstQuery: false,
enableHistory: false
},
TopFieldSuggestions: {
queryOverride: templateField  + "='News Article' OR " + templateField  + "=Product OR " + templateField  + "='Press Releases' AND " + languageField + "=" + currentLang
}
});
});
</script>

Fields used for auto suggestions have to be setup as Facets.

Let me know if you have any questions or comments.