Gravatar for

Question by ssartell, May 23, 2017 4:33 PM

Facets with standalone searchbox

Is it possible to create a standalone searchbox with facets? In my scenario, I have a page that has a searchbox, several facets, and then a search button. The idea is that a user could type in a query, pick some facet values, and then hit the search that which would redirect you to the search results page with all that state applied.

Building the interface without the ResultList component seems like it would be close to work, but might need tweaking and use queries needlessly. Is there a better approach? Is this just something Coveo doesn't support?

1 Reply
Gravatar for

Answer by François Lachance-Guillemette, May 23, 2017 7:05 PM

Short answer, yes, but not OOTB and it requires some work.

First, you would need to use a full-fledged Search Interface. The Standalone Searchbox does not support facets and would not initialize them correctly. Like you mentioned, you could leave out the ResultList and simply use the CoveoFacet and CoveoSearchbox components.

The approach I would take looks like this:

# Add a hook on the {{doneBuildingQuery}} event

When the query gets built:

  1. Cancel the query
  2. Read the current selected facet values from the state
  3. Generate an URL using the values you need

However, since {{doneBuildingQuery}} gets executed every time a new query is sent, you would need to detect whether the user has explicitly triggered the query or has selected a new value from the facets.

# Detecting whether the query was a user-triggered query

There are probably other, better ways to do this, but hooking on the {{state:change}} event would be nice to detect a Facet value change. Something like:

var facetHasChanged = false;    
var si = Coveo.$$(document.getElementById("YOURSEARCHINTERFACE"));    
si.on(Coveo.QueryEvents.newQuery, function() {        
    facetHasChanged = false;
si.on("state:change:f:YOURFACETNAME", function() {
    facetHasChanged = true;
si.on(Coveo.QueryEvents.doneBuildingQuery, function(e, args) {
    if (!facetHasChanged) {
        args.cancel = true;

The big caveats are that:

  1. It relies on a higher-scope boolean variable, which can be flaky in some situations and hard to debug if you are not careful enough.
  2. You need to know your facets names (or fetch them in the DOM).

If you use this method, you could remove some properties that are not needed and set the number of results to 0, and other optimizations like this.

Ask a question