Populate Combo Box list from CMS?

Hey there,

First of all, many thanks for all the great stuff that you people at Finsweet produce and publish – it’s been very helpful.

Now to my question. Is it possible to populate the choices in a Combo Box with content pulled from a CMS collection?

Kind regards,
Jacob

Hey again,
Anybody around to weigh in on this? @Support_Rohan ?
I’m stuck in a project and eager to find a solution.
Many thanks,
Jacob

Hi @konto!

Yes! You can populate the Combo Box list by using CMS Select.

You can follow the documentation for CMS Select here:

Then you can hide the Collection List with display:none

If you need any help let me know!

Hi Pedro, thanks for getting back to me!
I’ll have a look and will come back here once I’ve tried.
Thanks
Jacob

Hi again @Support-Pedro ,

I can’t make the select field and the Combo Box work together for some reason.

The select field is populated by a (hidden) CMS collection, but the search field does not generate any suggestions based on the text entered.

The Combo Box is in the accordion, below the search field.

Here is a link to the project:

And here is the staging site

I’m building a niche company directory (all in Swedish), hope it makes sense.

I’d be very grateful for any help here,
Thanks,
Jacob

Hi @konto!,

You can use the Combo Box as the Search Field, you just need to change the fs-cmsfilter-field="bolag, orgnummer, tingsratt"from the previous Search Field to the “fs-combobox_input” element and it will work as a Search Field and a Combo Box.

It should look like this, you can replace the previous Search Field with the Combo Box:

Let me know if it works for you! :muscle:

Hi again @Support-Pedro , thanks a lot for looking into this!

Something weird is going on. I could make the Combo Box work with CMS Select (thanks!), BUT it can take up to 2-3 minutes after the staging site loads for the list to populate. Until then, all you see is “No results found” and the template text “Option value”. Please see below screen recording (I advice you to fast forward to the end).

Combo box screen recording

What could be wrong here? Does it interfere with the other filters or something like that?

( Edit: CMS Select works without any delays. It is when I combine CMS Select with a Combo Box that the delay appears. )

And just for clarification if it is of any importance:
My plan is to offer the additional search filters for registered users (I will gate the accordion with Memberstack), so I need the big search field (element is called Main Search Field) to work together with the gated filters. I don’t want to replace the main search field with a combo box.

Thanks again!
Cheers
Jacob

Hi @konto

Are you still facing the same issue?

I checked the page and i had no delay with the CMS Select, i added fs-cmsfilter-field="tingsratt" in the ComboBox Input and both Search FIelds worked fine.

Edit: After writing this, I tried the “Speed boost”, after which the filters suddenly started working almost instantly. Is the size of my collection the issue here?

Hi there @Support-Pedro
It seems that whenever I combine CMS Filter with CMS Load (with my +3000 items), it takes a LONG time before the filters populate.

I’ve put the Combo Box aside for now just to try a more simple solution. Take a look at the staging site and try how long it takes for the select dropdowns to populate.

Here’s the project

Here’s the staging site

Thanks again!
Jacob

Hey @konto! Yes, the size of the collection and the data within each collection item can impact loading times.

To optimize this when using CMS Filter, it’s best to set the load mode to pagination, activate the speed boost, and enable cache. Note that the caching option is only applicable if the Collection List is not dynamically populated through Webflow’s CMS API.

Let us know whenever you’d like to re-integrate the Combobox solution!