javascript - Coveo 加载更多功能

Question

我正在尝试实现“加载更多”功能，而不是 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);
});

Answer 1

首先，您的代码不会满足您要求的行为。

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

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

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

您还可以按照 ShowMore 的示例进行操作Coveo 人员在 JavaScript Search Framework Custom Components repository 中创建的自定义组件.以下是自定义组件调用的 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;
}