如何使用numericRefinementList设置允许的距离？

Question

我希望能够使用numericRefinementList来允许用户从项目中选择自己的距离吗？这将使用IP地理位置功能或从浏览器输入地理位置（如果可用）。

• 小于50公里
• 50 - 100km
• 100 - 150km
• 超过150公里

https://community.algolia.com/instantsearch.js/documentation/#numericrefinementlist

Answer 1

遗憾的是，您无法使用numericRefinementList执行此操作，但您可以构建自定义窗口小部件，并根据您点击的链接设置aroundRadius：

function radiusList(options) {
  if (!options.container) {
    throw new Error('radiusList: usage: radiusList({container, ...})');
  }
  var $container = $(options.container);
  if ($container.length === 0) {
    throw new Error('radiusList: cannot select \'' + options.container + '\'');
  }

  return {
    init: function(args) {
      // event delegation: set the aroundRadius of the underlying link
      $(document).on('click', '.radius-link', function(e) {
        e.preventDefault();
        args.helper.setQueryParameter('aroundRadius', +$(this).data('radius'));
        args.helper.search();
      });
    },

    render: function(args) {
      // FIXME: display the list of radius links
      var html = '<ul>';
      html += '<li><a href="#" data-radius="100000" class="radius-link">&lt; 100km</a></li>';
      html += '</ul>';
      $container.html(html);
    }
  };
}

然后你用它：

search.addWidget(radiusList({container: '#my-radius-list'}));