Создайте раскрывающийся список выбора с помощью Algolia InstantSearch.JS

После нескольких дней создания формы поиска Algolia, теперь я пытаюсь создать простое поле выбора со списком цветов. Сам список цветов состоит примерно из 50 цветов, поэтому вводить его в качестве вариантов на самом деле не вариант, к тому же они меняются ежедневно.

Мне удалось установить там ползунок ценового диапазона и выбрать варианты цвета, но теперь мне нужно перебрать цвета и либо вернуть «...» и поместить в «», либо создать само поле выбора.

Пока что у меня есть:

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

Есть ли способ переформатировать это в поле выбора? Кроме того, цветовые диапазоны по-прежнему должны быть доступны для выбора после того, как один из них уже был выбран, чтобы конечный пользователь мог просто изменить его.

Любое руководство или помощь будут очень признательны.

Спасибо!


javascript algolia
person JonnyT    schedule 04.05.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Это возможно с коннекторами 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',
}));

Я знаю, что уже довольно поздно, но дайте мне знать, если это поможет!

person Haroen Viaene    schedule 18.07.2017