javascript - 使用 Algolia InstantSearch.JS 创建一个选择下拉列表

Question

在创建 Algolia 搜索表单几天后，现在正努力尝试创建一个带有颜色列表的简单选择字段。颜色列表本身大约有 50 种颜色，因此将其作为选项输入并不是一个真正的选择，而且这些颜色每天都在变化。

我已经成功地在上面设置了一个价格范围 slider 并选择了颜色选项，但我现在需要遍历颜色并返回“...”并放入“”或创建选择字段本身。

到目前为止，我有:

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

有没有办法将其重新格式化为一个选择字段？此外，在已经选择颜色范围之后，仍然需要选择颜色范围，以便最终用户可以更改。

如有任何指导或帮助，我们将不胜感激。

谢谢!

Answer 1

这可以通过 InstantSearch.js 的连接器实现。您所做的是在第一个渲染中进行选择，然后在后续渲染中更改 <option> 的值。

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',
}));

我知道已经很晚了，但如果这有帮助，请告诉我!

• https://community.algolia.com/instantsearch.js/v2/guides/customization.html
• https://community.algolia.com/instantsearch.js/v2/connectors/connectMenu.html