Refinment list with “show more” and search - display message to user and change the number of displayed results

Open Q&A
, , ,
#1

Hi Algolia Team,

I’m implementing InstantSearch.js and I’m facing a point I didn’t find any topic on. Here it is:
I have a refinment list with “show more” and search, same as in : https://instantsearchjs.netlify.app/stories/?path=/story/refinements-refinementlist--with-search-and-show-more

If I start typing in the searchbox “ge” for example, the “show more” button disappears but the limit stays: only 3 brands with GE are displayed (number that can be modified, but in my case, I don’t want to display more than 5 for readability). Thing is, some users could believe there are only 3 results; and if the value they had in mind is not in the 3 displayed brands, they could stop their search.

What I would like to is:

  • (optional) : be able to change dynamically the number of displayed brands when a brand search is on-going (for example display 10 brands)
  • display something below the list of brand results such as “X other brands”, or, if it is not possible to do something dynamic, at least write something like “more results available”

Could you advise me how to do this?
Thanks a lot!
B&B

#2

Hello,

(optional) : be able to change dynamically the number of displayed brands when a brand search is on-going (for example display 10 brands)

For this you’ll have to use a custom client and modify the request to do so you retrieve more facets when you are filtering brands.

Here’s an example that change the maxFacetHits to 10 when filtering on the brand: https://codesandbox.io/s/agitated-morse-0rrsz?file=/src/app.js

display something below the list of brand results such as “X other brands”, or, if it is not possible to do something dynamic, at least write something like “more results available”

You’ll have to use a custom widget to implement that logic and rely on the canToggleShowMore property to know if there is more results available. See the “Customize the UI” section in our documentation https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#connector