API Reference / Vue InstantSearch Widgets / ais-state-results

ais-state-results

Widget signature
<ais-state-results />

About this widget

The ais-state-results allows you reach into the current search state, for example, for conditional rendering or other rendering that depends on what the current refinement or results are.

Examples

1
<ais-state-results />

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

The scope is an object with the keys state and results.

state

  • query: string: the current value of the query.
  • page: number: the currently applied page.
  • … any other currently applied search parameters.

You can find all regular parameters on the search parameters page.

Note that this also includes parameters from the Helper, e.g., disjunctiveFacetsRefinements.

results

  • _rawResults: object[]: the raw response from the Algolia API.
  • query: string: the value of the query from the latest response.
  • hits: object[]: matching hits from the latest response. _ … any other values from the latest response.

You can find all regular response parameters on the response format page.

Note that this also includes parameters from the Helper, e.g. disjunctiveFacetsRefinements.

1
2
3
4
5
6
7
8
<ais-state-results>
  <p
    slot-scope="{ state: { query }, results: { hits } }"
    v-show="!hits.length"
  >
    No results found for the query: <q>{{ query }}</q>
  </p>
</ais-state-results>

Did you find this page helpful?