currentRefinements

Signature

currentRefinements({
  container: string | HTMLElement,
  // Optional parameters
  includedAttributes?: string[],
  excludedAttributes?: string[],
  cssClasses?: object,
  transformItems?: function,
});

Import

import { currentRefinements } from "instantsearch.js/es/widgets";

View demo

The currentRefinements widget displays a list of refinements applied to the search.

Examples

JavaScript

currentRefinements({
  container: "#current-refinements",
});

Options

container

string | HTMLElement

required

The CSS Selector or HTMLElement to insert the widget into.

currentRefinements({
  container: "#current-refinements",
});

includedAttributes

string[]

default:"[]"

The attributes to include in the widget (all by default). Cannot be used with excludedAttributes. In the example below, only the categories attribute is included in the widget.

JavaScript

currentRefinements({
  // ...
  includedAttributes: ["categories"],
});

excludedAttributes

string[]

default:"['query']"

The attributes to exclude from the widget. Cannot be used with includedAttributes. In the example below, the brand attribute is excluded from the widget.

JavaScript

currentRefinements({
  // ...
  excludedAttributes: ["brand"],
});

cssClasses

object

default:"{}"

The CSS classes you can override:

root. The root element of the widget.
noRefinementRoot. The root element if there are no refinements.
list. The list element.
item. The list items.
label. The label element of each item.
category. The container of each item value.
categoryLabel. The text element of each item value.
delete. The button element of eatch item value.

JavaScript

currentRefinements({
  // ...
  cssClasses: {
    root: "MyCustomCurrentRefinements",
    list: [
      "MyCustomCurrentRefinementsList",
      "MyCustomCurrentRefinementsList--subclass",
    ],
  },
});

transformItems

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.

JavaScript

currentRefinements({
  // ...
  transformItems(items) {
    return items.filter((item) => item.attribute !== "brand");
  },
});

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

HTML output

HTML

<div class="ais-CurrentRefinements">
  <ul class="ais-CurrentRefinements-list">
    <li class="ais-CurrentRefinements-item">
      <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>

Customize the UI with `connectCurrentRefinements`

If you want to create your own UI of the currentRefinements widget, you can use connectors. To use connectCurrentRefinements, you can import it with the declaration relevant to how you installed InstantSearch.js.

import { connectCurrentRefinements } from "instantsearch.js/es/connectors";

Then it’s a 3-step process:

JavaScript

// 1. Create a render function
const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customCurrentRefinements = connectCurrentRefinements(
  renderCurrentRefinements,
);

// 3. Instantiate
search.addWidgets([
  customCurrentRefinements({
    // instance params
  }),
]);

Create a render function

This rendering function is called before the first search (init lifecycle step) and each time results come back from Algolia (render lifecycle step).

JavaScript

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { items, canRefine, refine, createURL, widgetParams } = renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
};

Rendering options

items

object[]

All the currently refined items, grouped by attribute.With each item:

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 attribute on which the refinement is applied.
label: string. The textual representation of this attribute.
refine: function. Removes the refinement.
refinements: object[]. Currently applied refinements.

With each refinement:

type: 'facet' | 'exclude' | 'disjunctive' | 'hierarchical' | 'numeric' | 'query'. The type of the refinement.
attribute: string. The attribute on which the refinement is applied.
label: string. The label of the refinement to display.
value: string. The raw value of the refinement.
operator?: string. The value of the operator (only if applicable).
exhaustive?: boolean. Whether the count is exhaustive (only if applicable).
count?: number. The number of found items (only if applicable).

JavaScript

const renderListItem = (item) => `
  <li>
    ${item.attribute}
    <ul>
      ${item.refinements
        .map(
          (refinement) => `<li>${refinement.value} (${refinement.count})</li>`,
        )
        .join("")}
    </ul>
  </li>
`;

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { items } = renderOptions;

  document.querySelector("#current-refinements").innerHTML = `
    <ul>
      ${items.map(renderListItem).join("")}
    </ul>
  `;
};

canRefine

boolean

required

Indicates if search state can be refined.

JavaScript

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { canRefine } = renderOptions;

  if (!canRefine) {
    document.querySelector("#current-refinements").innerHTML = "";
    return;
  }
};

refine

function

Clears a single refinement and triggers a new search.

JavaScript

const createDataAttribtues = (refinement) =>
  Object.keys(refinement)
    .map((key) => `data-${key}="${refinement[key]}"`)
    .join(" ");

const renderListItem = (item) => `
  <li>
    ${item.label}
    <ul>
      ${item.refinements
        .map(
          (refinement) =>
            `<li>
              ${refinement.label} (${refinement.count})
              <button ${createDataAttribtues(refinement)}>X</button>
            </li>`,
        )
        .join("")}
    </ul>
  </li>
`;

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { items, refine } = renderOptions;

  const container = document.querySelector("#current-refinements");

  container.innerHTML = `
    <ul>
      ${items.map(renderListItem).join("")}
    </ul>
  `;

  [...container.querySelectorAll("button")].forEach((element) => {
    element.addEventListener("click", (event) => {
      const item = Object.keys(event.currentTarget.dataset).reduce(
        (acc, key) => ({
          ...acc,
          [key]: event.currentTarget.dataset[key],
        }),
        {},
      );

      refine(item);
    });
  });
};

createURL

function

Generates a URL for the next state.

JavaScript

const renderListItem = ({ item, createURL }) => `
  <li>
    ${item.label}
    <ul>
      ${item.refinements
        .map(
          (refinement) =>
            `<li>
              <a href="${createURL(refinement)}">
                ${refinement.label} (${refinement.count})
              </a>
            </li>`,
        )
        .join("")}
    </ul>
  </li>
`;

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { items, createURL } = renderOptions;

  document.querySelector("#current-refinements").innerHTML = `
    <ul>
      ${items.map((item) => renderListItem({ item, createURL })).join("")}
    </ul>
  `;
};

All original widget options forwarded to the render function.

JavaScript

const renderCurrentRefinements = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = "...";
};

// ...

search.addWidgets([
  customCurrentRefinements({
    container: document.querySelector("#current-refinements"),
  }),
]);

First, create your custom widgets using a rendering function. Then, instantiate them with parameters. There are two kinds of parameters you can pass:

Instance parameters. Predefined options that configure Algolia’s behavior.
Custom parameters. Parameters you define to make the widget reusable and adaptable.

Inside the renderFunction, both instance and custom parameters are accessible through connector.widgetParams.

JavaScript

const customCurrentRefinements = connectCurrentRefinements(
  renderCurrentRefinements
);

search.addWidgets([
  customCurrentRefinements({
    // Optional parameters
    includedAttributes: string[],
    excludedAttributes: string[],
    transformItems: function,
  })
]);

Instance options

includedAttributes

string[]

default:"[]"

The attributes to include in the widget (all by default). Cannot be used with excludedAttributes. In the example below, only the categories attribute is included in the widget.

JavaScript

customCurrentRefinements({
  includedAttributes: ["categories"],
});

excludedAttributes

string[]

default:"['query']"

The attributes to exclude from the widget. Cannot be used with includedAttributes. In the example below, the brand attribute is excluded from the widget.

JavaScript

customCurrentRefinements({
  excludedAttributes: ["brand"],
});

transformItems

function

default:"items => items"

JavaScript

customCurrentRefinements({
  transformItems(items) {
    return items.filter((item) => item.attribute !== "brand");
  },
});

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

Full example

<div id="current-refinements"></div>

InstantSearch.js

currentRefinements

Import

About this widget

Examples

Options

HTML output

Customize the UI with `connectCurrentRefinements`

Create a render function

Rendering options

Create and instantiate the custom widget

Instance options

Full example

InstantSearch.js

​Import

​About this widget

​Examples

​Options

​HTML output

​Customize the UI with connectCurrentRefinements

​Create a render function

​Rendering options

​Create and instantiate the custom widget

​Instance options

​Full example

Import

About this widget

Examples

Options

HTML output

Customize the UI with `connectCurrentRefinements`

Create a render function

Rendering options

Create and instantiate the custom widget

Instance options

Full example