Algolia Search 添加无限滚动答案

【问题标题】：Algolia Search adding infinite scrollAlgolia Search 添加无限滚动
【发布时间】：2016-07-19 15:16:52
【问题描述】：

我正在研究 Algolia 搜索并在 this tutorial 之后添加无限滚动。我只是简单地复制了他们给出的代码，但似乎我错过了一些东西。发送无限滚动请求时出现错误。请看下面的代码。

<html>
<head>
<title>Infinite Scroll Instant Search Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<a href="/"><img src="img/instant_search_logo@2x.png"/></a>
<input id="search-input" type="text" placeholder="Search for products"/>
<div id="search-input-icon"></div>
</header>
<main>
<div id="right-column">
<div id="hits"></div>
</div>
</main>

<script src="js/instantsearch.min.js"></script>
<script src="js/mustache.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<script src="js/infinite_scroll.js"></script>

<script type="text/html" id="hits-template">
 <div class="hits">
 {{#pageNo}}
  <div class="page-no">
    Page {{pageNo}}
  </div>
{{/pageNo}}
{{#hits}}
  <div class="hit">
    <a href="{{url}}">
      <img src="{{image}}" alt="{{name}}">
      <p class="name">
        {{#_snippetResult}}
          {{{_snippetResult.name.value}}}
        {{/_snippetResult}}
        {{^_snippetResult}}
          {{name}}
        {{/_snippetResult}}
      </p>
    </a>
  </div>
{{/hits}}
</div>
</script>

<script type="text/html" id="no-results-template">
<div id="no-results-message">
<p>We didn&rsquo;t find any results for the search <em>&ldquo;{{query}}&rdquo;</em></p>
<a href="#" class="clear-all">Clear all</a>
</div>
</script>

下面是我的脚本

<script type="text/javascript">
var search = instantsearch({
  appId: 'AJUBPPRF41',
  apiKey: '3cecdb91586ac2ac0d59f1355481f472',
  indexName: 'getstarted_actors',
  searchParameters: {
    attributesToSnippet: 'name:9'
  },
  urlSync: {
    useHash: true
  }
});

var searchBoxWidget = instantsearch.widgets.searchBox({
 container: '#search-input'
});

var infiniteScrollWidget = infiniteScrollWidget({
container: '#hits',
 templates: {
items: document.querySelector('#hits-template').innerHTML,
empty: document.querySelector('#no-results-template').innerHTML
}
});

search.addWidget(searchBoxWidget);
search.addWidget(infiniteScrollWidget);
search.start();

var cursor, index, page, nbPages, loading;

var infiniteScrollWidget = function(options){
var container = document.querySelector(options.container);
var templates = options.templates;

if(!container) {
throw new Error('infiniteScroll: cannot select \'' + options.container + '\'');
}
return {
init: function(){},
render: function(args) {
var scope = {
  templates: templates,
  container: container,
  args: args,
  offset: offset
};

if(args.results.nbHits) {
  window.addEventListener('scroll', searchNewRecords.bind(scope));
}
  initialRender(container, args, templates);
}
};
};

</script>
<script type="text/javascript">

var cursor, index, page, nbPages, loading;

var hitsDiv = document.getElementById('hits');

var scrolledNearBottom = function(el){
 return (el.scrollHeight - el.scrollTop) < 850;
};

var searchNewRecords = function(){
if(scrolledNearBottom(document.querySelector('body'))) {
 addSearchedRecords.call(this);
}
};

var addSearchedRecords = function(){
if(!loading && page < nbPages - 1) {
loading = true;
page += 1;
helper.searchOnce({page: page}, appendSearchResults.bind(this));
}
};

var appendSearchResults = function(err, res, state){
page = res.page;
args.results.pageNo = page + 1; // Here I get error saying args is not defined
loading = false;

var result = renderTemplate(this.templates.items, res);
this.container.appendChild(result);

if(page === nbPages - 1 && (this.args.results.nbHits > nbPages * this.args.results.hitsPerPage)){
 index = helper.client.initIndex(this.args.state.index);
 window.removeEventListener('scroll', searchNewRecords.bind(this));
 window.addEventListener('scroll', browseNewRecords.bind(this));
 addBrowsedRecords.call(this);
}
};
</script>

我在 appendSearchResults 方法中收到错误，说 args 未定义。我可以看到我在这里有重复的代码，但我不确定要删除什么以及添加什么。请指导。

【问题讨论】：

标签： php jquery infinite-scroll algolia

【解决方案1】：

在这里您可以获得完整的软件包。 https://github.com/algolia/demo-infinite-scroll/

我建议首先使其适用于现有字段、设置等。一旦演示在您的终端运行，您可以修改索引器字段并根据您的要求检索它。

【讨论】：