---
title: Prevent queries without keywords
slug: '389'
canonical_url: https://docs.coveo.com/en/389/
collection: javascript-search-framework
source_format: adoc
---
# Prevent queries without keywords
By default, submitting a [query](https://docs.coveo.com/en/231/) without entering any keywords in the search box allows the end user to retrieve a list of currently trending result [items](https://docs.coveo.com/en/210/).

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

[jsui-deprecated Deprecated]


Since the [February 2018 release (v2.2826.10)](https://docs.coveo.com/en/410#february-2018-release-v2382610) of the JavaScript Search Framework, preventing empty queries in a search page is trivial: all you have to do is set the [`allowQueriesWithoutKeywords`](https://coveo.github.io/search-ui/components/searchinterface.html#options.allowquerieswithoutkeywords) option of your [`SearchInterface`](https://coveo.github.io/search-ui/components/searchinterface.html) component to `false`.

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

## Previous framework versions

[jsui-deprecated Deprecated]


If you're 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 (for example, `+Coveo.SearchEndpoint.configureCloudV2Endpoint(...)+`) and framework initialization (for example, `+Coveo.init(...)+`) top-level function calls of your search page to prevent queries without keywords:

```javascript
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);
```

> **Note**
>
> If the root element of your search interface doesn't have `search` as its `id` attribute value, remember to adapt your code accordingly.
> 
> For example:
> 
> ```javascript
let root = Coveo.$$(document).find("#myRootElementSelector");
```

When using the above code sample, you should also set the [`autoTriggerQuery`](https://coveo.github.io/search-ui/components/searchinterface.html#options.autotriggerquery) option of your `SearchInterface` component to `false`.

```html
<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.

> **Note**
>
> [jsui-deprecated Deprecated]
> 
> 
> If you're using a JavaScript Search Framework version prior to the [July 2018 release (v2.2900.23)](https://docs.coveo.com/en/373#july-2017-release-v2290023), you must also set the [`hideUntilFirstQuery`](https://coveo.github.io/search-ui/components/searchinterface.html#options.hideuntilfirstquery) option of your `SearchInterface` component to `false`.
> 
> ```html
<div id="search" class="CoveoSearchInterface" data-auto-trigger-query="false" data-hide-until-first-query="false">
```