Concepts / Building Search UI / Conditional display

Conditional Display

You are reading the documentation for Vue InstantSearch v2. Read our migration guide to learn how to upgrade from v1 to v2. You can still find the v1 documentation here.

Handling no results

Not all queries lead to results, and it’s important to let users know when this happens. This gives you an opportunity to provide hints on how to adjust the query. This way, you can ensure users don’t leave your website or search using an external search engine.

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.

1
2
3
4
5
6
7
8
<ais-state-results>
  <template slot-scope="{ hits }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
    </div>
  </template>
</ais-state-results>

Note that the above example also works with ais-infinite-hits.

Let the user clear all filters

Users make mistakes, which can cause them to not find any results. You can account for this by providing a way to clear filters right from the “no results” state, so they can start over.

You can achieve this with the ais-clear-refinements widget. You can also add :excluded-attributes="[]" to clear the query as well.

1
2
3
4
5
6
7
8
9
10
11
<ais-state-results>
  <template slot-scope="{ hits }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
      <ais-clear-refinements :excluded-attributes="[]">
        <template slot="resetLabel">Clear all refinements</template>
      </ais-clear-refinements>
    </div>
  </template>
</ais-state-results>

You can also use ais-current-refinements to show the currently applied refinements.

1
2
3
4
5
6
7
8
9
<ais-state-results>
  <template slot-scope="{ hits }">
    <ais-hits v-if="hits.length > 0" />
    <div v-else>
      No results have been found for {{ query }}.
      <ais-current-refinements :excluded-attributes="[]" />
    </div>
  </template>
</ais-state-results>

Handling the empty query

By default, Vue InstantSearch always shows you results, even when the query is empty. Depending on your use case and the way you want to build your UI, you may want to only show results when there’s a query.

1
2
3
4
5
<ais-state-results>
  <template slot-scope="{ query }">
    <ais-hits v-if="query.length > 0" />
  </template>
</ais-state-results>

Did you find this page helpful?