Concepts / Building Search UI / Infinite scroll
May. 10, 2019

Infinite Scroll

Overview

A common pattern when browsing results on mobile is having an infinite scroll, which loads results as the user scrolls through the list of results. With InstantSearch, it’s as easy as setting the property infiniteScrolling of a HitsTableViewWidget or HitsCollectionViewWidget to true.

Example

Ecommerce

This example imitates a product search interface like well-known e-commerce applications.

  • Search in the product’s name, type, and category
  • Filter with RefinementList by type or category
  • Filter with Numeric filters by price or rating
  • Custom views using AlgoliaWidget for filtering by price and rating

Go further than 1000 hits

By default Algolia limit the number of hits you can retrieve for a query to 1000; when doing an infinite scroll, you usually want to go over this limit.

1
2
3
$index->setSettings([
  'paginationLimitedTo' => 1000
]);

Disabling the limit does not mean that we will be able to go until the end of the hits, but just that Algolia will go as far as possible in the index to retrieve results in a reasonable time.

Did you find this page helpful?