Gravatar for

Question by Simon, Apr 10, 2015 10:00 AM

Using .On() builder query to filter dynamically

I have seen a few examples of add .On() items to the, but I wanted to see if you had more info on the following scenario?

  1. I have a custom search page: It’s just a customized View file that references the Coveo searchmodel
  2. The users need to first select a state from a dropdown before displaying the results.
  3. The indexed item is called computedstatesregistered e.g. “Connecticut;Georgia;Illinois;​Indiana;Kentucky;Massachusetts”
  4. So, if I add this hard-coded state example, it works: using *= and ? as part of the expression: So, I’m not sure how to send a select option value dynamically to the Coveo.$(function)


.on("buildingQuery", function(e,args) {
    args.queryBuilder.constantExpression.add('@(Model.ToCoveoFieldName("computedstatesregistered")) *= hawaii?');

Do I need to over-ride the entire function?

1 Reply
Gravatar for

Answer by Simon, Apr 13, 2015 1:45 PM

I came up with this solution, but any suggested improvements are welcome.

I failed to mention that computedstatesregistered is also a facet item, so I try to imitate the coveo facet querystring.

wrapped the "CoveoResultList" in a div tag and do a Hide

$(window).load(function() {

///left the coveo code "as is"

Coveo.$(function() {
    CoveoForSitecore.componentsOptions = @(Html.Raw(Model.GetJavaScriptInitializationOptions()));
    Coveo.$('#search').coveoForSitecore('init', CoveoForSitecore.componentsOptions);

Added a select control for states.

<select id="OneState" onchange="stateChange(this)">
// values are wrapped in [] to match the facet querystring format.
    <option value="[Alabama]">Alabama</option>

// the select onchange event imitates the state facet querystring. // unhide the CoveoResultList, and since there's no way to keep the selected facet state in-sync with the state list dropdown, hide it. // note the 2 @ characters. If only one is there, the razor engine will see it as code, so @ acts as an escape character for itself.

function stateChange(val) {
    window.location.href='/this-page#f:@@fcomputedstatesregistered5019=' + val.value;
Gravatar for

Comment by Jean-François L'Heureux, Apr 13, 2015 2:02 PM

In Coveo for Sitecore, it is recommended to always use Coveo.$ instead of only $ to use jQuery. $ won't work in Sitecore 8 Experience Editor because it is not assigned to jQuery but to prototypeJS.

Ask a question