ais-current-refinements

Signature

<ais-current-refinements
  // Optional parameters
  :included-attributes="string[]"
  :excluded-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

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.

The ais-current-refinements widget displays a list of refinements applied to the search.

Examples

Vue

<ais-current-refinements />

Props

included-attributes

string[]

The attributes to include in the widget (all by default). Can’t be used with excluded-attributes. In the example below, only the categories attribute is included in the widget.

Vue

<ais-current-refinements
  :included-attributes="['categories']"
/>

excluded-attributes

string[]

default:"['query']"

The attributes to exclude from the widget. Can’t be used with included-attributes. In the example below, the brand attribute is excluded from the widget.

Vue

<ais-current-refinements
  :excluded-attributes="['brand']"
/>

transform-items

function

default:"items => items"

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

To prevent creating infinite loops, avoid passing arrays, objects, or functions directly in the template. These values aren’t referentially equal on each render, which causes the widget to re-register every time. Instead, define them in your component’s data option and reference them in the template.

Vue

<template>
  <!-- ... -->
  <ais-current-refinements :transform-items="transformItems" />
</template>

<script>
export default {
  methods: {
    transformItems(items) {
      return items.filter((item) => item.attribute !== "brand");
    },

    // or, combined with results
    transformItems(items, { results }) {
      return results.nbHits === 0
        ? items
        : items.filter((item) => item.attribute !== "brand");
    },
  },
};
</script>

class-names

object

default:"{}"

The CSS classes you can override:

ais-CurrentRefinements. The root element of the widget.
ais-CurrentRefinements--noRefinement. The root element of the widget without refinement.
ais-CurrentRefinements-list. The list of refined items.
ais-CurrentRefinements-item. The item of the refined items list.
ais-CurrentRefinements-label. The label of the refined item.
ais-CurrentRefinements-delete. The delete button of each item.

Vue

<ais-current-refinements
  :class-names="{
    'ais-CurrentRefinements': 'MyCustomCurrentRefinements',
    'ais-CurrentRefinements-list': 'MyCustomCurrentRefinementsList',
    // ...
  }"
/>

Customize the UI

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

items: object[]. The refinements currently applied to the search.
createURL: (value: object) => string. The function to return a link for the search without this refinement.

Where an item is an object containing:

indexName: string. The name on which the refinement is applied.
indexId: string. The index id on which the refinement is applied.
attribute: string. The name of the attribute with which the refinement is applied. The value is used as the key.
label: string. The name of the attribute with which the refinement is applied. The label is used as the the display value.
refine: (value: object) => void. The function to clear a refinement.
refinements: object[]. Each of the individual refinements for this attribute.

Where each refinement is an object containing:

type: string. Can be "facet", "exclude", "disjunctive", "hierarchical", "numeric" or "query".
attribute: string. The name of the attribute where the refinement is applied. The value is used as the key.
label: string. The name of the attribute with which the refinement is applied. The label is used as the the display value.
value: any. Actual value for this refinement.

Vue

<ais-current-refinements>
  <template v-slot="{ items, createURL }">
    <ul>
      <li v-for="item in items" :key="item.attribute">
        {{ item.label }}:
        <ul>
          <li
            v-for="refinement in item.refinements"
            :key="[
              refinement.attribute,
              refinement.type,
              refinement.value,
              refinement.operator
            ].join(':')"
          >
            <a
              :href="createURL(refinement)"
              @click.prevent="item.refine(refinement)"
            >
              {{ refinement.label }} X
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </template>
</ais-current-refinements>

item

The slot to override the DOM output of an item.Scope

item: object. One attribute with refinements.
refine: (value: string) => void. The function to clear a refinement.
createURL: (value: string) => void. The function to return a link for the search without this refinement.

Where item is an object containing:

indexName: string. The index name on which the refinement is applied.
indexId: string. The index id on which the refinement is applied.
attribute: string. The name of the attribute with which the refinement is applied. The value is used as the key.
label: string. The name of the attribute with which the refinement is applied. The label is used as the the display value.
refine: (value: object) => void. The function to clear a refinement.
refinements: object[] each of the individual refinements for this attribute.

Where each refinement is an object containing:

type: string. Can be "facet", "exclude", "disjunctive", "hierarchical", "numeric" or "query".
attribute: string. The name of the attribute with which the refinement is applied. The value is used as the key.
label: string. The name of the attribute with which the refinement is applied. The label is used as the the display value.
value: any. The actual value for this refinement.

Vue

<ais-current-refinements>
  <template v-slot:item="{ item, refine, createURL }">
    {{ item.label }}:
    <ul>
      <li
        v-for="refinement in item.refinements"
        :key="[
          refinement.attribute,
          refinement.type,
          refinement.value,
          refinement.operator
        ].join(':')"
      >
        <a
          :href="createURL(refinement)"
          @click.prevent="refine(refinement)"
        >
          {{ refinement.label }} X
        </a>
      </li>
    </ul>
  </template>
</ais-current-refinements>

refinement

The slot to override the DOM output of a sinrefinement.Scope

refinement: object. One item of the list of refinements.
refine: (value: string) => void. The function to clear a refinement.
createURL: (value: string) => void. The function to return a link for the search without this refinement.

Where refinement is an object containing:

type: string. Can be "facet", "exclude", "disjunctive", "hierarchical", "numeric" or "query".
attribute: string. The name of the attribute where the refinement is applied. The value is used as the key.
label: string. The name of the attribute with which the refinement is applied. The label is used as the the display value.
value: any. The actual value for this refinement.

Vue

<ais-current-refinements>
  <template v-slot:refinement="{ refinement, refine, createURL }">
    <a
      :href="createURL(refinement)"
      @click.prevent="refine(refinement)"
    >
      {{ refinement.label }} X
    </a>
  </template>
</ais-current-refinements>

HTML output

HTML

<div class="ais-CurrentRefinements">
  <ul class="ais-CurrentRefinements-list">
    <li class="ais-CurrentRefinements-itemt">
      <span class="ais-CurrentRefinements-label"> Category: </span>
      <span class="ais-CurrentRefinements-category">
        <span class="ais-CurrentRefinements-categoryLabel">
          Movies & TV Shows
        </span>
        <button class="ais-CurrentRefinements-delete">✕</button>
      </span>
      <span class="ais-CurrentRefinements-category">
        <span class="ais-CurrentRefinements-categoryLabel"> Others </span>
        <button class="ais-CurrentRefinements-delete">✕</button>
      </span>
    </li>
    <li class="ais-CurrentRefinements-item">
      <span class="ais-CurrentRefinements-label"> Brand: </span>
      <span class="ais-CurrentRefinements-category">
        <span class="ais-CurrentRefinements-categoryLabel"> Algolia </span>
        <button class="ais-CurrentRefinements-delete">✕</button>
      </span>
    </li>
  </ul>
</div>

​Import

See this widget in action

​About this widget

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Examples

Props

Customize the UI

HTML output