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

Question

在创建Algolia搜索表单几天后,现在正在努力创建一个带有颜色列表的简单选择字段.颜色列表本身大约有50种颜色,因此将其作为选项输入并不是一个真正的选项,而且每天都会更改.

我已经设法在那里得到一个价格范围滑块并拉出颜色的选项但我现在需要循环颜色并返回'...'并放入''或创建选择字段本身.

到目前为止,我有:

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

无论如何都要将其重新格式化为选择字段？此外,在选择一个颜色范围后,仍需要选择颜色范围,以便最终用户可以进行更改.

任何指导或帮助将非常感激.

谢谢!

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

我知道现在已经很晚了,但请告诉我这是否有帮助!

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