Question

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

我设法在那里获得了一个价格范围滑块并完成了颜色选项，但我现在需要循环显示颜色并返回＆＃39; ...＆＃39;放在＆＃39;＆＃39;或者自己创建选择字段。

到目前为止，我已经：

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

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

使用Algolia InstantSearch.JS

1 个答案: