Components Results

Results

A component to format and render the search results.

Usage

Basic usage:

<ais-results>
  <template slot-scope="{ result }">
    <h2>
      <a :href="result.url">
        {{ result.title }}
      </a>
    </h2>
    <p>{{ result.description }}</p>
  </template>
</ais-results>

Render results in a table:

<ais-results inline-template>
  <table>
    <tbody>
      <tr v-for="result in results" :key="result.objectID">
        <td>{{ result.name }}</td>
        <td>{{ result.description }}</td>
      </tr>
    </tbody>
  </table>
</ais-results>

Hint: In this case, you actually need to use a special Vue inline-template attribute. This will totally replace the existing default template and give you access to the Results component instance.

Props

Name	Type	Default	Description
stack	Boolean	false	If true, will append results of next page to current results when page changes
results-per-page	Number	``	The number of results to display

Slots

Name	Props	Default	Description
default	result, index	Displays the objectID	First page text
header		Add content to the top of the component, which will be hidden when the component is hidden
footer		Add content to the bottom of the component, which will be hidden when the component is hidden

CSS Classes

ClassName	Description
ais-results	Container class