Skip to main content

Documentation Index

Fetch the complete documentation index at: https://algolia.com/llms.txt

Use this file to discover all available pages before exploring further.

This guide describes what to do when there are no results or when there’s no query. Sometimes, though, users may not get any hits if their device can’t access the network or the network connection is slow. If you want to feature content in your search results based on a set of conditions, you can use Algolia Rules to:
To learn how to suppress InstantSearch’s initial , see Conditional requests.

​
Handling no results

Since not all queries lead to results, it’s essential to let users know when this happens by providing hints on how to adjust their query.

​
Display a message

The easiest way to display a fallback message when a query doesn’t return results is to use the ais-state-results widget.
Vue
<ais-state-results>
  <template v-slot="{ results: { hits, query } }">
    <ais-hits v-show="hits.length > 0" />
    <div v-show="hits.length === 0">
      No results have been found for {{ query }}.
    </div>
  </template>
</ais-state-results>
This also works with ais-infinite-hits.
To prevent undesirable, additional search requests, see Show and hide widgets.

​
Let users reset filters and facets

If users apply an overly specific configuration, they may not find any results. You should account for this by letting them reset filters from the “no results” display so they can start another search. Do this with the ais-clear-refinements widget. To clear the query, add :excluded-attributes="[]".
Vue
<ais-state-results>
  <template v-slot="{ results: { hits } }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
      <ais-clear-refinements :excluded-attributes="[]">
        <template v-slot:resetLabel>Clear all refinements</template>
      </ais-clear-refinements>
    </div>
  </template>
</ais-state-results>
You can also use ais-current-refinements to show currently applied filters.
Vue
<ais-state-results>
  <template v-slot="{ results: { hits } }">
    <ais-hits v-show="hits.length > 0" />
    <div v-show="hits.length === 0">
      No results have been found for {{ query }}.
      <ais-current-refinements :excluded-attributes="[]" />
    </div>
  </template>
</ais-state-results>

​
Handling empty queries

By default, InstantSearch always shows you results, even when the query is empty. Depending on your use case and how you build your UI, you may only want to show results when there’s a query.
Vue
<ais-state-results>
  <template v-slot="{ state: { query } }">
    <ais-hits v-show="query.length > 0" />
  </template>
</ais-state-results>
Follow best practices for showing and hiding Vue InstantSearch widgets to prevent undesirable additional search requests.
Last modified on March 12, 2026