connectors connectNumericSelector

Edit this page

Description

NumericSelector connector provides the logic to build a custom widget that will let the user filter the results based on a list of numerical filters.

It provides a refine(value) function to trigger a new search with selected option.

Usage

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

const makeNumericSelector= instantsearch.connectors.connectNumericSelector(
function renderFn(
renderOpts: NumericSelectorRenderingOptions,
isFirstRendering: boolean) {
// render the custom NumericSelector widget
} );

const customNumericSelector = makeNumericSelector(instanceOpts: CustomNumericSelectorWidgetOptions);
search.addWidget(customNumericSelector);

Connector options

NumericSelectorRenderingOptions

  • currentRefinementstring

    The currently selected value.

  • optionsArray<NumericSelectorOption>

    The different values and labels of the selector.

  • refine(option.value) => undefined

    Updates the results with the selected value.

  • hasNoResultsboolean

    true if the last search contains no result.

  • widgetParamsObject

    All original CustomNumericSelectorWidgetOptions forwarded to the renderFn.

NumericSelectorOption

  • valuenumber

    The numerical value to refine with. If the value is undefined or "undefined", the option resets the filter.

  • labelstring

    Label to display in the option.

CustomNumericSelectorWidgetOptions

  • attributeNamestring

    Name of the attribute for faceting (eg. “free_shipping”).

  • optionsArray<NumericSelectorOption>

    Array of objects defining the different values and labels.

  • operator[string]
    Default value: '='

    The operator to use to refine. Supports following operators: <, <=, =, >, >= and !=.

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

    Function to transform the items passed to the templates.

Example

// custom `renderFn` to render the custom NumericSelector widget
function renderFn(NumericSelectorRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    NumericSelectorRenderingOptions.widgetParams.containerNode.html('<select></select>');
    NumericSelectorRenderingOptions.widgetParams.containerNode
      .find('select')
      .on('change', function(event) {
        NumericSelectorRenderingOptions.refine(event.target.value);
      })
  }

  var optionsHTML = NumericSelectorRenderingOptions.options.map(function(option) {
    return '<option value="' + option.value + '"' +
      (NumericSelectorRenderingOptions.currentRefinement === option.value ? ' selected' : '') + '>' +
      option.label + '</option>';
  });

  NumericSelectorRenderingOptions.widgetParams.containerNode
    .find('select')
    .html(optionsHTML);
}

// connect `renderFn` to NumericSelector logic
var customNumericSelector = instantsearch.connectors.connectNumericSelector(renderFn);

// mount widget on the page
search.addWidget(
  customNumericSelector({
    containerNode: $('#custom-numeric-selector-container'),
    operator: '>=',
    attributeName: 'popularity',
    options: [
      {label: 'Default', value: 0},
      {label: 'Top 10', value: 9991},
      {label: 'Top 100', value: 9901},
      {label: 'Top 500', value: 9501},
    ],
  })
);


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