Preventing Queries Without Keywords

By default, submitting a query without entering any keywords in the search box allows the end user to retrieve a list of currently trending result items.

However, you may rather want to hide all search interface components except the search box until the end user submits their first non-empty query, and essentially ignore empty queries thereafter.

Current Framework Version

Coveo JavaScript Search Framework 2.3826.10 (February 2018)

Since the February 2018 Release (v2.2826.10) of the JavaScript Search Framework, preventing empty queries in a search page is trivial: all you have to do is set the allowQueriesWithoutKeywords option of your SearchInterface component to false.

<div id="search" class="CoveoSearchInterface" data-allow-queries-without-keywords="false">
  <!-- ... -->
</div>

Previous Framework Versions

Coveo JavaScript Search Framework 2.2826.10 (February 2018)

If you are using a JavaScript Search Framework version prior to the February 2018 Release (v2.2826.10), you can insert the following code sample between the endpoint registration (e.g., Coveo.SearchEndpoint.configureCloudV2Endpoint(...)) and framework initialization (e.g., Coveo.init(...)) top-level function calls of your search page to prevent queries without keywords:

function hidePage() {
  togglePageVisibility(false);
}
 
function togglePageVisibility(show) {
  Coveo.$$(document).find('.coveo-search-section').style.marginTop = show ? null : '20%';
  Coveo.$$(document).find('.coveo-main-section').style.display = show ? null : 'none';
  Coveo.$$(document).find('.coveo-tab-section').style.visibility = show ? 'visible' : 'hidden';
}
 
function executeNonEmptyQuery(e, data) {
  let root = Coveo.$$(document).find("#search")
  if (Coveo.state(root, "q").length > 0) {
    Coveo.executeQuery(root);
  }
}
 
function showPage(e, data) {
  if (data.queryBuilder.containsEndUserKeywords()) {
    togglePageVisibility(true);
  } else {
    let root = Coveo.$$(document).find("#search");
    let queryController = Coveo.get(root, "QueryController");
    let lastBasicQueryExpression = queryController.lastQuery ? queryController.lastQuery.q : undefined;
    if (lastBasicQueryExpression) {
      data.queryBuilder.expression.add(lastBasicQueryExpression);
      Coveo.state(root, "q", lastBasicQueryExpression);
    }
  }
}
 
let root = Coveo.$$(document).find('#search');
 
Coveo.$$(root).on('beforeInitialization', hidePage);
Coveo.$$(root).on('afterInitialization', executeNonEmptyQuery);
Coveo.$$(root).on('doneBuildingQuery', showPage);

If the root element of your search interface does not have search as its id attribute value, remember to adapt your code accordingly.

let root = Coveo.$$(document).find("#myRootElementSelector");

When using the above code sample, you should also set the autoTriggerQuery option of your SearchInterface component to false.

<div id="search" class="CoveoSearchInterface" data-auto-trigger-query="false">

While leaving this option to true has no noticeable visual effect, it nevertheless results in a useless query being executed when the page is first initialized.

Coveo JavaScript Search Framework 2.2900.23 (July 2017)

If you are using a JavaScript Search Framework version prior to the July 2018 Release (v2.2900.23), you must also set the hideUntilFirstQuery option of your SearchInterface component to false.

<div id="search" class="CoveoSearchInterface" data-auto-trigger-query="false" data-hide-until-first-query="false">