[instantsearch.js v2] Connector usage sample

Connector_usage.js

// custom `renderFn` to render the custom Menu widget
function renderFn(menuRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    menuRenderingOptions.widgetParams.containerNode
      .html('<select></select');

    menuRenderingOptions.widgetParams.containerNode
      .find('select')
      .on('change', function(event) {
        menuRenderingOptions.refine(event.target.value);
      });
  }

  var options = menuRenderingOptions.items.map(function(item) {
    return item.isRefined
      ? '<option value="' + item.value + '" selected>' + item.label + '</option>'
      : '<option value="' + item.value + '">' + item.label + '</option>';
  });

  menuRenderingOptions.widgetParams.containerNode
    .find('select')
    .html(options);
}

// connect `renderFn` to Menu logic
var customMenu = instantsearch.connectors.connectMenu(renderFn);

// mount widget on the page
search.addWidget(
  customMenu({
    containerNode: $('#custom-menu-container'),
    attributeName: 'categories',
    limit: 10,
  })
);