Add pagination to DocSearch

[parkas2018]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

End user can only see the top few search results. DocSearch users can configure hitsPerPage to display a specific number of results (i.e. 5, 10, 15, etc.). That's all the end user get to see. There isn't any way for end user to browse to the next page and see the next set of results.

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
[JSFiddle][3] example or a repository on GitHub that we can npm install
and npm start.

What is the expected behavior?

There will be pagination in the search-UI so that users can browse between different pages/set of results.

---

I have some Documentation sites built using https://docusaurus.io/

I've signed up for DocSearch and configured it accordingly. It works great so far. It seems the pagination is missing from the Search-UI. The search result is only showing the top 5 results (out of the box) but I know there are other results available.

I've been going through the following page and the closest option I could come across is hitsPerPage.

https://www.algolia.com/doc/api-reference/api-parameters

Not sure if this is actually a bug or intentional behaviour, but hitsPerPage doesn't necessarily add a pagination in the search-UI (a mechanism to browse between different pages).

I did a search for pagination in the issues of this repository, but didn't see any request for it or another issue that explains this.

I also checked out various other sites that uses Algolia DocSearch; none of them has the ability to do pagination in the search results. The above api reference shows various options related to pagination. Is this just a matter of implementing the pagination in the Search-UI?

[Shipow]

Hi Parvezakkas,
to be honest we never envisaged to have a pagination in the dropdown and the underlying library we are using to build the dropdown would have probably not make it easy.
Good news though is that library being updated with a great modularity that could actually cover this use case much more easily.
Also I'm curious to know why you would prefer a pagination to any kind of advanced scrolling?

[parkas2018]

Hi @Shipow

Thanks for your reply. I'm glad to hear that this can be possible in future.

I don't really have a preference between pagination vs advanced scrolling; mainly because I haven't yet seen an example of that advanced scrolling. Do you happen to have an example of the advanced scrolling that I can look at?

The main concern behind this issue was that end users are not able to find search results if it doesn't make it to the top of the ranks. The current UI also doesn't make it clear that "these are the top ranking page but there are more". That gives a false impression to the user that the search query could only find those 5 or 10 pages and none of the other pages contains that keyword.

Where do we go from here? I'm relatively new to Algolia's DocSearch. Not sure what is the next step.

[Shipow]

Hi @parvezakkas,
The information about more potential hits is definitely missing in our current version, that's a very good feedback.
I'd recommend to try first to implement a "load more" button (change the hitsPerPage) or give more informations on displayed results vs total matches somewhere close to the query. We should definitely try something in that direction with the new version of autocomplete.

Where can I try your search ?

edit: Also one of the key feature of DocSearch is relevancy your are definitely supposed to find the right ressource with ~ 5 results, maybe we have an issue there?

[parkas2018]

Hi @Shipow,

Here's one of the documentation sites I maintain at the moment.

https://documentation.elasticpath.com/commerce/docs/index.html

If you try the DocSearch from any of the following well known sites, they all have have the same issue in my opinion; only displays top few results as defined in the DocSearch configuration or what is default (mostly 5 results).

• React (https://reactjs.org/docs/getting-started.html)
• Prettier (https://prettier.io/docs/en/index.html)
• GitLab (https://docs.gitlab.com/ee/README.html)

edit: Also one of the key feature of DocSearch is relevancy your are definitely supposed to find the right ressource with ~ 5 results, maybe we have an issue there?

That's a possibility or perhaps the user needs to provide more input in the search query for fine tuning the results further. Either way in my opinion the end user should always have the option to browse through all the search results. Otherwise there's the implication of getting false impression of "no more results found".

[brandonkelly]

We are using Docsearch via VuePress for https://docs.craftcms.com and someone just reported not being able to find what they were looking for, and pagination would have helped them.

[donenoyes]

What is the status of this issue? Is this being worked on, would be very very useful to have.