How to hide CMS List Items when there is no search input?

Hey, Webflow Community!

I have been designing a website for my organisation and for that I needed an on-page site search bar.

  1. I tried using the Webflow Search Component, but it is redirecting the search result on different page.
  2. I tried using jetboost.io, but it sadly only works on .webflow.io domains and not on custom domains.

Finally, I tried coding it, as @PixelGeek explains in a tutorial video. Now, that works wonderfully. The search bar takes input and filter the CMS Grid in real time. However, I want the CMS grid to be completely hidden except when the user inputs in that search bar. Can anybody help me with this?

1 Like

No answers yet? I have the same issue.

Hi! This sounds like a cool project! I think I have an idea that might help. I can’t see your site, so I’m not sure exactly what you’re looking for, but I think you could add an interaction to the search bar. You could initially give the grid a display of hidden, and then use a hide/show interaction to show it when the user clicks on the search bar. You might be able to use opacity as well, but that could cause spacing issues if there are other items on the site. Also, if you are planning to use Javascript, you could use a key down event instead of click to only show items after you start typing or press enter in the search bar.
I hope this helps a little!

Hi Jordan,

Thank you for your help. I believe I wasn’t clear about my intentions, let me explain again and put the url to make it clear.

The URL is: https://letsdelivery.webflow.io/integracoes

I’m using the Finsweet solution to filter on a CMS, but there is a problem on that. After you applied one filter, like country, the search is limited to itens only at the country selected.

What I want to do is make the search more broadly and work separate from the rest of the filters, like: you can also use search bar and filter everything or you can use the filters on the side of the CMS. The combination of both doesn’t make sense.

I tried, with no success yet, to recreated the CMS filter exclusive for the search bar but to make it works I need to copy and paste the CMS collection. If I hide it in the page, the search does not work, apparently it only works to search visible items.

There is a item at Finsweet called initial state, I’m guessing that could work, but didn’t try it yet.

So, if you have any other ideas, please help me on that. If you need my public url, please let me know.

Again, thanks for your help.

Best,