Coveo 加载更多功能

Question

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

我在 Coveo 文档中搜索了 load more button/functions 但没有找到。

//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 and JavaScript API calls 更改查询。

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

你也可以效仿ShowMore custom component created by Coveo people in the 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;
}

Answer 2

displayMoreResults 对我有用

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

Coveo 加载更多功能

Coveo load more functionality

javascript

api

jquery

coveo