Question

我已经实现了包含1个搜索输入和多个索引以及多个统计/分页小部件的instantsearch.js。除了分页小部件外，一切似乎都正常工作。

这是一个codepen https://codepen.io/flrrrhoffpauir/pen/EEpWre

collections.addWidget(
    instantsearch.widgets.pagination({
        container: '#collections-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#stories-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

如果搜索“martin”然后单击“Stories”选项卡，则可以看到结果并且分页正在运行。如果现在单击“集合”选项卡，您可以看到分页窗口小部件具有正确的页数，具体取决于根据统计信息窗口小部件返回的结果数量，但是您单击转到第2页，您只需滚动到页面顶部，它不会加载第2页数据。

如何在页面上同时获得两个或多个分页小部件才能正常工作？

这是我创建多索引搜索的原因，但它们不包含多个分页小部件：https://jsfiddle.net/j9nwpz34/49/

Answer 1

searchFunction实现应该传输需要同步的所有信息。例如，在您的情况下，您有一个要在InstantSearch实例之间同步的分页窗口小部件，因此您希望在查询参数的基础上传输分页属性。

var search = instantsearch(
{
  /* appId: '',
  apiKey: '', 
  indexName: 'movies',*/
  searchFunction: function(helper) {
    var query = movies.helper.state.query;
    var page = movies.helper.state.page;
    products.helper.setQuery(query);
    products.helper.setPage(page)
    products.helper.search();
    helper.search();
  },
  searchParameters: {
    hitsPerPage: 3
  }
});

我修改了JSFiddle以符合您的需要。您可以转到JS Helper documentation（InstantSearch.js的内部状态管理），了解有关此状态的更多信息。

根据jsFiddle provided更新

示例的其余部分仍然有效。但是，有一点需要注意的是，如果您在帮助程序中进行修改，它将重置页面。在提供的小提琴中，您在集合searchFunction中进行了这样的更改。您将始终设置查询，该查询将始终将页面重置为0.因此，错误。

这是fixed fiddle

具有多个索引和多个分页小部件的Algolia Instantsearch

1 个答案: