widgets menuSelect

Description

Create a menu select out of a facet

Live example

You can find an example at the end of the page.

Usage

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

const widget = instantsearch.widgets.menuSelect({ 
  container: string|HTMLElement, 
  attribute: string, 
  sortBy: [Array<string>|function], 
  templates: [MenuSelectTemplates], 
  limit: [number], 
  cssClasses: [MenuSelectCSSClasses], 
  transformItems: [(Array<object>) => Array<object>], 
}: MenuSelectWidgetOptions);

search.addWidget(widget);

Options

MenuSelectWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• attributestring

  Name of the attribute for faceting

• sortBy[Array<string>|function]
  Default value: ['name:asc']

  How to sort refinements. Possible values: count|isRefined|name:asc|name:desc.

  You can also use a sort function that behaves like the standard Javascript compareFunction.

• templates[MenuSelectTemplates]

  Customize the output through templating.

• limit[number]
  Default value: 10

  How many facets values to retrieve.

• cssClasses[MenuSelectCSSClasses]

  CSS classes to add to the wrapping elements.

• transformItems[(Array<object>) => Array<object>]

  Function to transform the items passed to the templates.

MenuSelectTemplates

• item[string|(label, count, isRefined, value) => undefined]

  Item template, provided with label, count, isRefined and value data properties.

• defaultOption[string]
  Default value: 'See all'

  Label of the “see all” option in the select.

MenuSelectCSSClasses

• root[string|Array<string>]

  CSS class to add to the root element.

• noRefinementRoot[string|Array<string>]

  CSS class to add to the root when there are no items to display

• select[string|Array<string>]

  CSS class to add to the select element.

• option[string|Array<string>]

  CSS class to add to the option 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.menuSelect({
    container: '#categories-menuSelect',
    attribute: 'hierarchicalCategories.lvl0',
    limit: 10,
  })
);

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