使用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>的值

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