widgets clearAll

Edit this page

Description

The clear all widget gives the user the ability to clear all the refinements currently applied on the results. It is equivalent to the reset button of a form.

The current refined values widget can display a button that has the same behavior.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

Usage
const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.clearAll({ container: string|HTMLElement, excludeAttributes: [Array<string>], templates: [ClearAllTemplates], autoHideContainer: [boolean], cssClasses: [ClearAllCSSClasses], collapsible: [boolean|{collapsed: boolean}], clearsQuery: [boolean], }: ClearAllWidgetOptions);
search.addWidget(widget);

Options

ClearAllWidgetOptions

  • containerstring|HTMLElement

    CSS Selector or HTMLElement to insert the widget.

  • excludeAttributes[Array<string>]

    List of attributes names to exclude from clear actions.

  • templates[ClearAllTemplates]

    Templates to use for the widget.

  • autoHideContainer[boolean]
    Default value: true

    Hide the container when there are no refinements to clear.

  • cssClasses[ClearAllCSSClasses]

    CSS classes to be added.

  • collapsible[boolean|{collapsed: boolean}]
    Default value: false

    Makes the widget collapsible. The user can then. choose to hide the content of the widget. This option can also be an object with the property collapsed. If this property is true, then the widget is hidden during the first rendering.

  • clearsQuery[boolean]
    Default value: false

    If true, the widget will also clear the query.

ClearAllTemplates

  • header[string|(object) => string]

    Header template.

ClearAllCSSClasses

  • root[string|Array<string>]

    CSS class to add to the root element.

  • header[string|Array<string>]

    CSS class to add to the header element.

  • body[string|Array<string>]

    CSS class to add to the body element.

Widget

  • render[function]

    Called after each search response has been received

  • getConfiguration[function]

    Let the widget update the configuration of the search with new parameters

  • init[function]

    Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.clearAll({
    container: '#clear-all',
    templates: {
      link: 'Reset everything'
    },
    autoHideContainer: false,
    clearsQuery: true,
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.