Geek Answers Handbook

Create a dropdown using Algolia InstantSearch.JS

A few days after creating the Algolia search form, she is now trying to create a simple selection box with a list of colors. The color list itself is about 50 colors, so writing this option is not an option, plus these changes per day.

I managed to get the price range slider there and pull out the color options, but now I need to iterate over the colors and return "..." and put inside the "" or create a selection box by itself.

So far I have had:

search.addWidget(
  instantsearch.widgets.menu({
    container: '#colour',
    attributeName: 'colour',
    limit: 10,
    indices: {
      header: 'Colour'
    }
  })
);

Is there a way to reformat this in the select box? In addition, color ranges still need to be selected after one is already selected so that the end user can simply change.

Any guidance or help would be greatly appreciated.

Thank!

+4
1

InstantSearch.js. , , , <option> s

import instantsearch from 'instantsearch.js';

function render(
  {items, refine, widgetParams: {containerNode, title}},
  isFirstRendering
) {
  let select;
  if (isFirstRendering) {
    const header = document.createElement('div');
    header.innerText = title;
    containerNode.appendChild(header);
    select = document.createElement('select');

    select.addEventListener('change', e => refine(e.target.value));

    containerNode.appendChild(select);
  } else {
    select = containerNode.querySelector('select');
  }

  const options = items.map(item => {
    const option = document.createElement('option');

    option.innerText = `${item.label} ${item.count}`;
    option.value = item.value;
    option.selected = item.isRefined;

    return option;
  });

  select.textContent = '';
  options.forEach(el => select.appendChild(el));
}

export default instantsearch.connectors.connectMenu(render);

:

import selectMenu from './custom-widgets/selectMenu.js';

search.addWidget(selectMenu({
  containerNode: document.getElementById('#menu'),
  attributeName: 'brand',
  limit: 10,
  title: 'Brands',
}));

, , !

+7

More articles:


All Articles