Enable Infinite Scroll

Head to Settings & Defaults -> Display Results -> and change Pagination Type to Infinite Scroll, then update the Search Form.

Immediately you will see that when you scroll to the bottom of your results, a loader appears and new results are loaded in (if there are any).

Search & Filter is copying everything from your `Ajax Container` (from your next set of results) and appending it to the `Ajax Container` on your current page,

This is probably not what you want, you’ll likely have a bunch of other content / results data that gets copied across and duplicated, including messages such as

Showing results 1-10 of 140

And your pagination, what you probably want is only the results themselves to be loaded in.  That’s where the next two options come in.

Only use one of these options, not both.

Using the `Post / Result Selector` Option

This option allows you to tell S&F which html tags or other CSS selector actually contain your individual results.

This settings is relative to your Ajax Container so this might be as simple as:

div.post

or

article

Test your search form again.  You will now see only the posts/results are copied over to your Ajax Container.  In addition to this, the new posts are placed directly after the last post in the list matching this selector.

* Only fill in one of the settings Post / Result Selector or Infinite Scroll Container – never both.

Using the `Infinite Scroll Container` Option

In some cases using the Post / Result Selector option might be possible (or preferable).  In this case, it might be possible to only specify a secondary container.

In the Enable Infinite Scroll step we identified that all the content was being copied from the Ajax Container , however we wanted to isolate the posts only. This setting allows you to specify a secondary container which will container only your results.

This container must contain only the posts/results themselves, otherwise you will get duplicated content in your results. No search related meta data should be inside this container.

* Only fill in one of the settings Post / Result Selector or Infinite Scroll Container – never both.

Containers  & Selectors

To help explain the above a little more clearly take a look at the following images to give a better overview of the area and type of content they are supposed to contain.

[metaslider id=81897]

Remove Pagination

The last step is to remove / hide your existing pagination.  This can be done by editing your template and removing the code referencing pagination, or simply by CSS.

In most cases some CSS as simple as the below would do the trick:

.pagination{
display:none;
}

(of course you wouldn’t want to apply this to your whole site!)

Preventing the Double Load Effect

Because S&F won’t know when the end of your results are, often there is an additional request/load results, and loading icon, when S&F tries to fetch more results. It has to do this twice to confirm.

To cut this out, all you need to do is include a simple data- attribute somewhere in your no results message, to tell S&F, this is the actual end of results and don’t bother trying to fetch anymore.

This is as simple as adding

data-search-filter-action='infinite-scroll-end' to any html element in the no results area, and within the ajax container.

So a no results message could be as simple as:

No more results

and this would be changed by wrapping the message in a span and attaching the attribute:

<span data-search-filter-action='infinite-scroll-end'>No more results</span>