#community-help

Suppressing Empty Option in Refinement Lists

TLDR Keith asked how to suppress an empty option in a refinement list. Jason provided instructions for using the transform items function to do so.

25mo

Join the chat

Dec 17, 2021 (25 months ago)

Photo of md5-49c23d5dc46241ca1af5233658633765

Keith

08:55 PM

Hey Jason I have another one for ya; in my refinement lists, if an item doesn’t have the field set, it shows an empty option. Is there any way I can suppress that from showing?

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

08:57 PM

Yup, you can do this on the client side using transform items: https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/#widget-param-transformitems

08:57

Jason

08:57 PM

You’re using react instantsearch IIRC right?

Keith

08:58 PM

I’m using the Instantsearch.js adapter

Jason

08:59 PM

The adapter can be used with react, vue or vanilla js versions of instantsearch…

Here’s the instantsearch.js version of transform items: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-transformitems

Keith

09:00 PM

What would you suggest I transform the item to if it’s blank?

Jason

09:00 PM

You can just remove the item from the list if it is blank

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3015 threads (79% resolved)

Join Our Community

Similar Threads

Building Python Flask Search UI with Typesense

Rakesh had issues building a Python Flask based Search UI with typesense. Jason suggested alternatives to using npm/yarn, and provided an example. Rakesh confirmed the provided solution worked and later enquired on adding a product filter panel, which Jason addressed.

16mo

Configuring Filters in Instantsearch.js Custom Refinement List

John needed assistance configuring filters for a custom refinement list in Instantsearch.js. Jason advised creating separate dom elements and one `refinementList` widget per attribute.

32mo

Query on Menu RefinementList and Usage of Typesense with React-InstantSearch-Hooks

Dipankar wanted to refine menus using `react-instantsearch-dom` and inquired on Typesense's compatibility with `react-instantsearch-hooks`. Jason recommended using `connectCurrentRefinements` and confirmed Typesense's compatibility.

19mo