Algolia Search添加无限滚动 - php

我正在研究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/[email protected]"/></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。我可以看到我在这里有重复的代码，但是我不确定要删除和添加什么。请指导。

参考方案

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

我建议首先使其与现有字段，设置等一起使用。演示在您最后运行后，您可以修改Indexer字段并根据需要进行检索。

jQuery不起作用 - php

我正在使用带有ajax的jquery。有时，给出错误$未定义。这是我的代码：<script language="javascript" type="text/javascript"> var base_path="<? echo $this->baseUrl().'/…

Div单击与单选按钮相同吗？ - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同？我只希望下面的div提交值，单选按钮很丑代码输出如下：<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…

PHP-复选框组 - php

我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…

jQuery如果选中则启用动态输入文本 - php

我正在使用PHP生成具有表格的表格，例如：<table class="table table-hover"> <thead> <tr> <th class="table-checkbox"> </th> <th> Description </…

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

Algolia Search添加无限滚动 - php

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…