Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[instantsearch.js v2] Connector usage sample
// 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,
})
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.