Creating search bar on page to generate results from CMS collection?

Hey. I am new to Webflow with limited dev experience, and I am creating a very simple site (for now) where I want to import my Google Sheets data to CMS collections, and make it searchable publicly through search on the site. I have imported the data but can’t work out how I can allow a visitor to the site to search for results from that CMS collection. Can anyone advise me how I could go about doing this? Thank you in advance for any help!

Hi lerner,

If the list is small, max a few hundred items, you can build that screen using Finsweet CMS filters. The textbox filter can be set to filter as you’re typing, so they’d get matching text results only.

If the list is large, you’ll need to rely on Webflow’s site search capability which doesn’t have much in the way of configuration options. It will treat all of the pages of your site equally, and give results that are site-wide. You can probably improve that by making certain the right search keywords are in the titles and H1’s of the pages you want given priority.

I have some techniques that I use to give some organization to search results pages as well, so that results are categorized and styled depending primarily on the collection they’re from. Here’s an example of that.

Overall you can build a decent experience there.

If you need more customizability on the search indexing itself or on your results page, you’ll need to use a 3rd party solution of some kind.

I have not tried any of these;

https://university.webflow.com/integrations-type/search

Thank you! So I managed to do this using Jetboost. Sort of.

What I really want is the collection to be invisible until the search term is entered.

Currently the entire collection is visible and then filtered when the search term is entered.

If I make the entire list hidden, of course it is not revealed when the search term is entered so that didn’t work.

Any solutions people can advise please??

I have not used Jetboost’s filtering, but check the docs, I’d imagine that’s a common request and that they either have a built-in setting or a support how-to.

Otherwise, you could probably do the show/hide using a separate piece of Javascript code, which I think won’t interfere with Jetboost’s handlers.

1 Like

Thanks. I went back to the start and actually managed to do all of this far more easily with Finsweet CMS filtering. Appreciate your responses!