Coveo 加载更多功能答案

【问题标题】：Coveo load more functionalityCoveo 加载更多功能
【发布时间】：2019-06-02 03:51:19
【问题描述】：

我正在尝试实现“加载更多”功能，而不是 Coveo 中的基本分页。我的按钮代码如下。只有控制台日志有效，代码不会向服务发送 ajax。

我在 Coveo 文档中搜索了加载更多按钮/功能，但没有找到。

//html code of button    
<div data-firstres="0" class="load_more_btn">Load More</div>     

//js
$('.load_more_btn').on('click', function() {
    var this_btn = $(this);
    var firstResult = this_btn.attr('data-firstres');
    var q = $('.magic-box-input input').val();
    console.log(q);
    var new_res = parseInt(firstResult) + 10;
    this_btn.attr('data-firstres', new_res);
    console.log(new_res);
    var root = document.body;
    Coveo.SearchEndpoint.endpoints['default'] = new Coveo.SearchEndpoint({
      restUri: 'https://platform.cloud.coveo.com/rest/search',
      queryStringArguments: {
          organizationId: 'replaced_val',
          numberOfResults: '10',
          firstResult:firstResult,
          q:q
        },
      accessToken: acc_token,
    });
    Coveo.init(root);
});

【问题讨论】：

标签： javascript jquery api coveo

【解决方案1】：

首先，您的代码不会满足您所需的行为。

Coveo.init 只能调用一次，用于初始化搜索界面。 SearchEndpoint 应该只设置一次，在初始化之前，而不是在每次“LoadMore”点击之后。

然后您应该使用JavaScript Search Events 和JavaScript API calls 更改查询。

因此，对于您的用例，您可以利用CoveoResultList 组件的displayMoreResults method。

您也可以在JavaScript Search Framework Custom Components repository 中关注由Coveo 人创建的ShowMore 自定义组件的示例。以下是自定义组件调用的displayMoreResults() 方法的相关部分：

public loadMore() {
  this.resultList ? this.resultList.displayMoreResults(this.options.count || 10) : null;
}

public get resultList(): ResultList | null {
  const resultListElement = $$(this.root).find('.CoveoResultList');
  if (resultListElement) {
    return get(resultListElement) as ResultList;
  }
  return null;
}

【讨论】：

我在初始化时添加了Coveo.$$(root).on("buildingQuery", function(e, args) { queryBuilder = args.queryBuilder; queryBuilder.firstResult = 22; });，在加载更多点击事件中添加了Coveo.state(root).attributes.first = 22; Coveo.executeQuery(root);，但仍然没有更改查询，它始终使用默认参数运行。
这不是我在这里解释的，你必须使用displayMoreResults调用，或者以ShowMore组件为例，完整的框架组件。

【解决方案2】：

displayMoreResults 为我工作

$('.load_more_btn').on('click', function() {
  Coveo.$('.CoveoResultList').coveo('displayMoreResults', 5);
});

【讨论】：