ais-relevant-sort

Lets users switch between search modes, exhaustive or relevant sorting.

Signature

<ais-relevant-sort
  // Optional parameters
  :class-names="object"
/>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisRelevantSort } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisRelevantSort
  },
  // ...
};

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

About this widget

Virtual indices let you use relevant sort, a sorting mechanism that favors relevancy over the attribute you’re sorting on. The ais-relevant-sort widget displays the current search mode when searching in a virtual replica index, and allows users to switch between relevant and regular sorting, which is more exhaustive but can return less relevant results.

Examples

Vue

<ais-relevant-sort>
  <template v-slot:text="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>Currently showing all results</template>
  </template>
  <template v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">See all results</template>
    <template>See relevant results</template>
  </template>
</ais-relevant-sort>

Props

class-names · object · default: "{}"

The CSS classes you can override:

• ais-RelevantSort. The root element of the widget.
• ais-RelevantSort-text. The text element.
• ais-RelevantSort-button. The button element.

Vue

<ais-stats
  :class-names="{
    'ais-RelevantSort': 'MyCustomRelevantSort',
    'ais-RelevantSort-text': 'MyCustomRelevantSortText',
    'ais-RelevantSort-button': 'MyCustomRelevantSortButton',
  }"
/>

default

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

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

Scope

• isRelevantSorted: boolean. True if the current index is using Relevant sort.
• refine: function. Function to toggle between showing relevant or all results.

Vue

<ais-relevant-sort>
  <template v-slot="{ isRelevantSorted, refine }">
    <button @click="refine">
      <template v-if="isRelevantSorted">
        show all results
      </template>
      <template v-else>
        show most relevant results
      </template
    </button>
  </template>
</ais-relevant-sort>

text

The slot to override the introductory text.

Scope

• isRelevantSorted: boolean. True if the current index is Relevant sorted.

Vue

<ais-relevant-sort>
  <template v-slot:text="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>Currently showing all results</template>
  </template>
</ais-relevant-sort>

button

The slot to override the toggle button.

Scope

• isRelevantSorted: boolean. True if the current index is using Relevant sort.

Vue

<ais-relevant-sort>
  <template v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">See all results</template>
    <template>See relevant results</template>
  </template>
</ais-relevant-sort>

HTML output

HTML

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>We removed some search results to show you the most relevant ones</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See all results</span>
  </button>
</div>

<!-- or -->

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>Currently showing all results</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See relevant results</span>
  </button>
</div>