使用 Algolia InstantSearch.JS 创建一个选择下拉菜单答案

【问题标题】：Create a select dropdown with Algolia InstantSearch.JS使用 Algolia InstantSearch.JS 创建一个选择下拉菜单
【发布时间】：2016-08-30 05:47:23
【问题描述】：

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

我已经设法在那里获得一个价格范围滑块并拉出颜色选项，但我现在需要遍历颜色并返回“...”并放入“”或创建选择字段自己。

到目前为止，我有：

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

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

任何指导或帮助将不胜感激。

谢谢！

【问题讨论】：

标签： javascript algolia

【解决方案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',
}));

我知道现在已经很晚了，但是如果这有帮助，请告诉我！

【讨论】：