I have been designing a website for my organisation and for that I needed an on-page site search bar.
I tried using the Webflow Search Component, but it is redirecting the search result on different page.
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?
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!
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.
I am also looking for this functionality while using the finsweet filter. I had minimal success using opacity instead of hide/show as an interaction on the search button. The problem I ran into was a little odd though: the CMS collection had issues showing all the entries that matched the query consistently. Sometimes they were missing even though i typed it in verbatim.
@Jodie_Ball make certain you’re using FS Load as well if your collection list contains more than 100 items, or those will not be included in the filter result.
As far as making the list invisible before filtering is specified;
