Show more results of the current search query inline on the page.

The moreresults action is an alternative to using a next/previous pager to paginate through search results. Instead, moreresults lets you load more results from the current search, directly onto the same page. This feature is similar to Twitter’s more button, Slashdot’s many more button, and others.

Using it is quite simple. The only special thing you need is that every result item should go into its own template. The minimal example is something like the following:

{% with{ cat: "media", pagelen: 10 } as result %}
  <div id="results">
    {% for id in result %}
      {% include "_item.tpl" %}
    {% endfor %}

  {% button text="more..." action={moreresults result=result
{% endwith %}

The number of items that get added is equal to the pagelen setting of the search.

When there are no more items, the moreresults button will get disabled automatically.


Points to search result that you want to show more of.
Container that the new items get appended to.
Contains template that will be appended.
Render template through a catinclude.
Normally the template is called for every row in the search result. This is useful for lists. Sometimes all results must be rendered together, for example when special grouping is needed. Add is_result_render to render all results together in one template.


{% with{ cat: "media", pagelen: 16 } as result %}
  <div id="results">
     {% include "_items.tpl" %}

  {% lazy action={moreresults result=result
{% endwith %}

Note that here we use the lazy scomp, which will perform the action if it is scrolled into view. Because we are using the lazy scomp we have to add the visible argument so that the re-loaded moreresults action will be wired for visibility and not for a click. In this way the page loads automatically more results if the user scrolls down.

The template _items.tpl displays the found pages in rows of four elements:

{% for ids in result|chunk:4 %}
   <div class="row">
   {% for id in ids %}
       <div class="col-md-3">
           <h3><a href="{{ id.page_url }}">{{ id.title }}</a></h3>
           <p>{{ id.summary }}</p>
   {% endfor %}
{% empty %}
   <div class="row"></div>
{% endfor %}

Edit on GitHub


Referred by


An overview of all wire actions.