Displaying Content Based on Whether There Are Query Results

You may want to render custom content in the query summary or in a result list only when the query does not yield any results (or alternatively, only when it does yield some results).

Customizing the No Results Message

Coveo JavaScript Search Framework 2.4609.6 (September 2018)

The enableNoResultsFoundMessage and noResultsFoundMessage options of the QuerySummary component allow you to specify a custom message to display when the query returns no results.

You can use the ${query} variable to inject the current basic query expression (q) in your custom message.

A simple custom no results message.

<span class="CoveoQuerySummary"
      data-enable-no-results-found-message="true"
      data-no-results-found-message="${query}, you say? Sorry, no results!">
</span>

You can further customize the no results message by embedding one or more HTML blocks with the coveo-show-if-no-results class within the element bound to the QuerySummary component.

The coveo-show-if-no-results class is only intended to be used on HTML blocks embedded within an element bound to a QuerySummary or ResultList component.

A custom no results message with additional HTML.

<span class="CoveoQuerySummary"
      data-enable-no-results-found-message="true"
      data-no-results-found-message="${query}, you say? Sorry, no results!">
  <div class="coveo-show-if-no-results">
    <p>However, <em>${query}</em> does remind me of the following cute kitten:</p>
    <img src="http://example.com/cute-kitten.jpg" alt="^._.^">
  </div>
</span>

In a similar fashion, you can use the coveo-show-if-no-results class to display a component in the query summary only when the query returns no results.

Displaying a Logo component in the query summary when there are no results.

<span class="CoveoQuerySummary"
      data-enable-no-results-found-message="true"
      data-no-results-found-message="${query}, you say? Sorry, no results!">
  <div class="coveo-show-if-no-results CoveoLogo"></div>
</span>

Conditionally Displaying Custom Content in a Result List

Inside an element bound to a ResultList component, you can embed one or more HTML blocks with the coveo-show-if-results or coveo-show-if-no-results class to display that content depending on whether the query has returned any results.

The coveo-show-if-no-results class is only intended to be used on HTML blocks embedded within an element bound to a QuerySummary or ResultList component, whereas the coveo-show-if-results class should only be used on HTML blocks embedded within an element bound to a ResultList component.

  • Displaying a custom HTML block in a result list only when there are results.

    <div class="CoveoResultList">
      <div class="coveo-show-if-results">
        <p>Results, yay :)</p>
      </div>
    </div>
    

  • Displaying a custom HTML block in a result list only when there are no results.

<div class="CoveoResultList">
  <div class="coveo-show-if-no-results">
    <p>I feel empty :(</p>
  </div>
</div>

In a similar fashion, you can use the coveo-show-if-results and coveo-show-if-no-results classes to conditionally display a component in a result list.

Displaying a Logo component in a result list only when there are no results.

<div class="CoveoResultList">
  <div class="coveo-show-if-no-results CoveoLogo"></div>
</div>