ais-state-results

Signature

<ais-state-results />

See code examples

See live example

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

Copy

1
<ais-state-results />

Customize the UI


            default

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

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

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.

Copy

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

1
2
3
4
5
6
7
8
9
<ais-state-results>
  <template v-slot="{ results: { userData } }">
    <img
      v-for="item in userData"
      :key="item.source"
      :src="'https://example.com/images/' + item.source"
    />
  </template>
</ais-state-results>

Did you find this page helpful?