The custom CSS within the Inside tag is breaking other aspects of my website, and the search function doesn't work either. Should I try going to Settings and putting this in the Custom Code>Head Code area?
Hey! Is there's any way to hide the CMS grids until the user searches? That is, to put the CMS grid into display:hidden, and only show it when there is something in value v?
Awesome tutorial! I transform the text input in some buttons, is it possible to concatenated the value of 2 buttons? I also created a "clear all" filter, but I am having a hard time to learn how to concatenated the values.
This is great, thanks so much! For anyone trouble shooting this be sure that when your changing class names that you add the dot '.' before the class name as it was catching me out. I had "collectionentryslat" and not ".collectionentryslat" in my Before tag
This is by far one of best videos I have seen on WF. Thank you. It was very helpful. However, I am trying to figure out how to style the search bar. As it’s an embed I am not sure how to do it. Any suggestions? Thank you.
@@pixelgeek 100%. I just popped you a message on Instagram too. Just out of curiosity, how can I style the search box? At the moment the function is great, but it looks a little plain and could be easily missed.
Hello Nelson, thank you for this tutorial I was wondering if it is possible to use a webflow's text field with this code? if not, is there any way it could ? I've implemented the finsweet attribute filters already, and I was looking for a way for the visitors to search with keywords just like you did here
yes you can use a form text field, you just need to give it the same class as the tutorial search-page) and you can customize it which is awesome I hope it will work with the finsweet filtering too
glad to hear it worked on your first go at it :) To style the input field, just drag in a form block, give one of the input fields the same class name (e.g. "page-search") and style it. Once you're done, delete the form block. Hope this helps
Too quick with the question again. Important to style .page-search which you used in the embed itself. Seems like you can only style the size in px and not %.
Hi Nelson, thank you so much for this tutorial, it;s just what I need. I was wondering though, if it is possible to put an effect on this as it shows results? Rather than them instantly display, could a fade be put on the show / hide to make them it little less brutal? Where would I put this code?
Good video.. Just a quick question. How I can make on page safe but with out removing the text? I want to make something like ctrl + F .. Is that even possible?
It works well, but can you make the search work when the collection list is paginated? As in, can the on-page search find items on page 2, page 3 etc. of the collection list?
Hey, thanks! Glad you love working at Webflow- I'm proud to be a user / partner! I'd like to ask you more on how to apply this. I tried to get the categories product CMS to link but it did not work. Do I have to create a CMS collection separately with the products or can I use the E-commerce Products template page / CMS collection list feature? I'm not much a coder, so I'm not sure how to adapt these functions
Hey Nelson, super powerful trick, very useful 💪🏻 Can you clarify, why did you remove the results and noresults only to add them back in, is it a way of setting the search to empty to start?
Super, super useful. Will definitely add it to my site. Can I just ask a question about code/codes added in webflow? I know NOTHING about coding but I have quite a lot of code snippets I want to add in the site code and page code. I know how each code snippet works know when it's explained to me but at a later stage it could be a problem for me to remember what each code does. Can I inside the code manager write small headings above each snippets describing their function without it interfering with the function of the scripts, code etc.? Sorry for the long question...
Hi Nelson! Does this also work for pages with webflow pagination? Or do you have an idea how to manage it without super expensive plugins? Thanks for the tutorial anyway!
This is exactly what I have been trying to do! Thank you!!! I'll try adding it to my project tomorrow - as an extra annoying challenge, would it be possible to combine this with a drop-down menu? I currently have 3 dropdowns on a recruitment website (job category, location and job type (perm or contract)) - it's working with the mixitup plugin but if I have to pick that or text search I think text search wins. Would be amazing to do both though. Thanks again!
Text search works like a dream, thank you! I actually managed to add it on to the dropdowns too - to get the "clear filters" button to work i had to set it up to pass "" though your jquery function. Its not perfect but it works - definitely a few bugs though so looking forward to seeing how you do it properly. Thanks again for your videos :)
Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board: chat.pixelgeek.community/c/project-help
I've tried it with the blog page, but it doesn't work. I have a heading paragraph and the button inside the collection item (gave it the class blog item and put it to the code) and it doesn't work, can somebody please help me with it?
Thank you, I am not sure I speak for all of us but I personally really enjoy tutorials involving code. Could you make a tutorial on real time filtering, it's a nightmare for me, I've tried mixitup but i have a hard time with it. Is it possible to do that in a simple custom code like you did here? Also I am really disappointed with webflow still not adding real time filtering features, like this is really a basic thing and a lot of people needs, and it's requested since 2017.
@@pixelgeek Yes actually but I am just not sure why you can only filter through reference and multi reference, i am not an expert but that seems like a big limitation (maybe I am wrong on this one). But yes I wish webflow will add them soon (like this is requested since 2017) because paying 9$ dollars each month for filters and doing all this additional work is just very frustrating.
You are awesome. Thank you so much for this. Question: How do I call a combo class? I have a class called "Collection Item" with a combo class called "3.0"
Hi. Great tutorial. Thank you for making it. I do have 1 question -- is there a way to modify your jquery to completely remove all the noresults "team-member" cards (instead of simply hiding them using display:none) ? I'm trying to get rid of the big empty space between the search bar and the card that actually displays ("results").
Hello! Tried this out and it works thank you! is there a way to grab all the data from CMS collection and not what is on the page itself? as it seems it's only searching from the things that are currently on that page. hope that made sense! haha
Thanks for this! How can you show a custom message if a search returns no results e.g. "It doesn't seem like your search returned anything - try something else"
Got it working but i used the form field input instead of the embed with customer html. Also I think the name of block has changed to inline-block but all good in the end. Would love to know if there was a way to make the experience a bit more smoother. It can be a bit jumpy when showing results, it would be great if there was a small delay/fade on showing results. Thanks for your vids man!!
Are you talking about the input search field? To style the input field, just drag in a form block, give one of the input fields the same class name (e.g. "page-search") and style it. Once you're done, delete the form block. Hope this helps :)
Hi, 👋 I get the tutorial. and I apply it to the form field instead of the embeded typeform but my problem is. i just want to leave the field when i press enter. so that the keyboard in mobile will disappear also.
I’ve been looking for this exact search for my CMS. Currently building a site where my CMS contains thousands of trading cards. This should work right? Great content btw! Subbed!
this doesn't work with paginate. Another suggestion is to use the Jetboost filter which DOES work with paginate: www.jetboost.io/products/real-time-on-page-search
Hi Nelson. I know you're busy but please help me. I just cannot style the search button/text. Tried with form as you suggested but it doesn't work. Cannot get rid of the grey border and the size stays the same. Please help....
@@pixelgeek Thanks Nelson. Here's the link. The problem is in tab no. 2 preview.webflow.com/preview/travelhubber?preview=f63553f7b0cbf05bef5452f6c156b44e&mode=preview
Please don't forget me ;) I really need your help at this one. Happy new year by the way and keep up the great tutorials you make. Really helpful for many people.
Thanks for this, although I found a nice bug: To avoid unexpected behaviour it's better to use an ID on the search field instead of a class, e.g. I eventually discovered if you use a class you can find yourself in a situation where your keyup function fires twice because the search field will be included in the class ".my-searchbar" AND the webflow class ".my-searchbar.w-embed". The first time it fires, the value will be the correct value e.g. "a", and then it will fire again immediately after with an empty value "". This creates a problem when you go from one character like "a" and then backspace to zero characters "". The search results will never reset to display all results and you're stuck on "a" until you search for something else.
Oh my gosh this is exactly what I have been looking for!!!!!! Thank you for explaining it so clearly!
glad to help! :). You can also try using jetboost.io
This is GREAT. Been looking for exactly this solution....
Hey Nelson. This is sooo good! Do you have an Idea if there could be a workaround for a collection with a pagination?! Thanks
The custom CSS within the Inside tag is breaking other aspects of my website, and the search function doesn't work either. Should I try going to Settings and putting this in the Custom Code>Head Code area?
Hey! Is there's any way to hide the CMS grids until the user searches? That is, to put the CMS grid into display:hidden, and only show it when there is something in value v?
Hi, Nelson. If that's the case, could we do it to filter the list with buttons instead of search?
Yes. I'll post a video of that soon :)
@@pixelgeek so basically I could use it instead of the tabs I'm using now for filtering?
Awesome tutorial! I transform the text input in some buttons, is it possible to concatenated the value of 2 buttons? I also created a "clear all" filter, but I am having a hard time to learn how to concatenated the values.
This is great, thanks so much!
For anyone trouble shooting this be sure that when your changing class names that you add the dot '.' before the class name as it was catching me out. I had "collectionentryslat" and not ".collectionentryslat" in my Before tag
great tip :)
STILL DOESN'T WORK. I did everything step by step, and checked everything 3 times, it doesn't work at all, when I type, nothing happens
This is by far one of best videos I have seen on WF. Thank you. It was very helpful. However, I am trying to figure out how to style the search bar. As it’s an embed I am not sure how to do it. Any suggestions? Thank you.
Amazing lesson. So Easy. Thumbs up Sir
Thanks 😁👍 hope you can join our community at pixelgeek.community
@@pixelgeek 100%. I just popped you a message on Instagram too. Just out of curiosity, how can I style the search box? At the moment the function is great, but it looks a little plain and could be easily missed.
Has anyone built a solution where the page displays a "no results found" when no matches are met?
Hello Nelson, thank you for this tutorial
I was wondering if it is possible to use a webflow's text field with this code? if not, is there any way it could ?
I've implemented the finsweet attribute filters already, and I was looking for a way for the visitors to search with keywords just like you did here
yes you can use a form text field, you just need to give it the same class as the tutorial search-page) and you can customize it which is awesome
I hope it will work with the finsweet filtering too
Hallelujah - it worked in first attempt. However, it would be nice if it could be style e.g. width, border thickness etc. Can that be achieved?
glad to hear it worked on your first go at it :) To style the input field, just drag in a form block, give one of the input fields the same class name (e.g. "page-search") and style it. Once you're done, delete the form block.
Hope this helps
@@pixelgeek Cool. Will have a try tomorrow. Fingers crossed 😁
I cannot get rid of the thin grey border. It just styles the whole embed instead!!??
Too quick with the question again. Important to style .page-search which you used in the embed itself. Seems like you can only style the size in px and not %.
Thx for this tutorial. How can I disable autofocus of the input field? The blue line who appears when I click on it in the preview mode?
This is great Nelson - how can we style the search box?
Is it possible to designate just one field of the collection to search on?... is that possible with this script?
Hi Nelson, thank you so much for this tutorial, it;s just what I need. I was wondering though, if it is possible to put an effect on this as it shows results? Rather than them instantly display, could a fade be put on the show / hide to make them it little less brutal? Where would I put this code?
Good video..
Just a quick question. How I can make on page safe but with out removing the text? I want to make something like ctrl + F .. Is that even possible?
Am I right to think that this works only if you have less than 100 CMS items? More than 100 requires pagination and therefore wont load those above.
It works well, but can you make the search work when the collection list is paginated? As in, can the on-page search find items on page 2, page 3 etc. of the collection list?
This approach doesn't work with pagination. But you can use jetboost.io for that
@@pixelgeek Thx. Just saw that jetboost is free for staging but over $11 for a live site per month.
Hey, thanks!
Glad you love working at Webflow- I'm proud to be a user / partner!
I'd like to ask you more on how to apply this.
I tried to get the categories product CMS to link but it did not work.
Do I have to create a CMS collection separately with the products or can I use the E-commerce Products template page / CMS collection list feature?
I'm not much a coder, so I'm not sure how to adapt these functions
Hey Nelson, super powerful trick, very useful 💪🏻
Can you clarify, why did you remove the results and noresults only to add them back in, is it a way of setting the search to empty to start?
Super, super useful. Will definitely add it to my site.
Can I just ask a question about code/codes added in webflow?
I know NOTHING about coding but I have quite a lot of code snippets I want to add in the site code and page code. I know how each code snippet works know when it's explained to me but at a later stage it could be a problem for me to remember what each code does.
Can I inside the code manager write small headings above each snippets describing their function without it interfering with the function of the scripts, code etc.?
Sorry for the long question...
Forget this - figured it out :)
you probably found out that yes, you can add comments in code :)
Hi Nelson! Does this also work for pages with webflow pagination? Or do you have an idea how to manage it without super expensive plugins? Thanks for the tutorial anyway!
This is exactly what I have been trying to do! Thank you!!! I'll try adding it to my project tomorrow - as an extra annoying challenge, would it be possible to combine this with a drop-down menu? I currently have 3 dropdowns on a recruitment website (job category, location and job type (perm or contract)) - it's working with the mixitup plugin but if I have to pick that or text search I think text search wins. Would be amazing to do both though. Thanks again!
I'll make a video of this solution soon :)
Text search works like a dream, thank you! I actually managed to add it on to the dropdowns too - to get the "clear filters" button to work i had to set it up to pass "" though your jquery function. Its not perfect but it works - definitely a few bugs though so looking forward to seeing how you do it properly. Thanks again for your videos :)
@@pixelgeek Hi Nelson. Did you ever do this? I'm having this challenge too.
Awesome Nelson! Just one q, do you know how to custom code the CSS of the box like changing color or not starting the text from ahead a little.
Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board:
chat.pixelgeek.community/c/project-help
Hi Christan! have you managed to find a solution for this? ty in advance!
I've tried it with the blog page, but it doesn't work. I have a heading paragraph and the button inside the collection item (gave it the class blog item and put it to the code) and it doesn't work, can somebody please help me with it?
Nice !
Hope this is a strart to teach us more on embeding other JS to webflow !
Yup. More low-code tricks coming soon
@@pixelgeek awesome
I did infact use this track! Thank you!
Thank you, I am not sure I speak for all of us but I personally really enjoy tutorials involving code. Could you make a tutorial on real time filtering, it's a nightmare for me, I've tried mixitup but i have a hard time with it. Is it possible to do that in a simple custom code like you did here? Also I am really disappointed with webflow still not adding real time filtering features, like this is really a basic thing and a lot of people needs, and it's requested since 2017.
have tried using jetboost.io ?
@@pixelgeek Yes actually but I am just not sure why you can only filter through reference and multi reference, i am not an expert but that seems like a big limitation (maybe I am wrong on this one). But yes I wish webflow will add them soon (like this is requested since 2017) because paying 9$ dollars each month for filters and doing all this additional work is just very frustrating.
wonderful tutorial! thank u!
You're welcome 😁🙇🏽♂️
You are awesome. Thank you so much for this. Question: How do I call a combo class? I have a class called "Collection Item" with a combo class called "3.0"
Hi. Great tutorial. Thank you for making it. I do have 1 question -- is there a way to modify your jquery to completely remove all the noresults "team-member" cards (instead of simply hiding them using display:none) ? I'm trying to get rid of the big empty space between the search bar and the card that actually displays ("results").
did you find any solution? :(
So amazing! Thanks!
HELLO,,, IS THERE ANY WAY TO SEARCH IN ONE CMS COLLESTION ????????
yes. but you'll need to use an integration with jetboost.io
Hello! Tried this out and it works thank you! is there a way to grab all the data from CMS collection and not what is on the page itself? as it seems it's only searching from the things that are currently on that page. hope that made sense! haha
Nvm, found my answer through the comments lol. good video otherwise.
Will Search pick up things that aren't being pulled into the page via the CMS?
no. if you need a better instant search in a collection list, jetboost.io might be a better option.
Thanks for this! How can you show a custom message if a search returns no results e.g. "It doesn't seem like your search returned anything - try something else"
Got it working but i used the form field input instead of the embed with customer html. Also I think the name of block has changed to inline-block but all good in the end. Would love to know if there was a way to make the experience a bit more smoother. It can be a bit jumpy when showing results, it would be great if there was a small delay/fade on showing results. Thanks for your vids man!!
does the success message display when you press enter? I'm having a hard time on this. i just want to leave the field when i press enter.
Can you style the block in webflow once it's on the page? Or would you put it in a div and style that?
Are you talking about the input search field?
To style the input field, just drag in a form block, give one of the input fields the same class name (e.g. "page-search") and style it. Once you're done, delete the form block.
Hope this helps :)
Hi, 👋 I get the tutorial. and I apply it to the form field instead of the embeded typeform but my problem is. i just want to leave the field when i press enter. so that the keyboard in mobile will disappear also.
Awesome Nelson!!! Thank you! Can you show us how to add a placeholder text in the search bar before people start typing in it? Thank you!!
Your the best!!!
I’ve been looking for this exact search for my CMS. Currently building a site where my CMS contains thousands of trading cards. This should work right? Great content btw! Subbed!
It depends how many trading cards you're talking about. Is it over 10,000? If so, then Webflow might not be for you.
I have a question. Can we hook the code to search button instead?
Yes. You can hook up the trigger to any element
is it possible for this work site wide? or just for individual pages?
This only works on single pages
Does this work with paginate?
this doesn't work with paginate. Another suggestion is to use the Jetboost filter which DOES work with paginate: www.jetboost.io/products/real-time-on-page-search
Love it!
Thanks!!
Thank you so much!!
My pleasure 😁🙇🏽♂️
Hi Nelson. I know you're busy but please help me. I just cannot style the search button/text. Tried with form as you suggested but it doesn't work. Cannot get rid of the grey border and the size stays the same. Please help....
can you post your read-only link?
@@pixelgeek Thanks Nelson. Here's the link. The problem is in tab no. 2
preview.webflow.com/preview/travelhubber?preview=f63553f7b0cbf05bef5452f6c156b44e&mode=preview
Please don't forget me ;) I really need your help at this one. Happy new year by the way and keep up the great tutorials you make. Really helpful for many people.
THANK YOU SUPER MUCH!
🔥🔥🔥
for some reason this isnt working... ive done everything. lol
Yes it's not working🙁☹️
Actually I got it to work... not sure how but I did lol
Thanks for this, although I found a nice bug: To avoid unexpected behaviour it's better to use an ID on the search field instead of a class, e.g.
I eventually discovered if you use a class you can find yourself in a situation where your keyup function fires twice because the search field will be included in the class ".my-searchbar" AND the webflow class ".my-searchbar.w-embed". The first time it fires, the value will be the correct value e.g. "a", and then it will fire again immediately after with an empty value "". This creates a problem when you go from one character like "a" and then backspace to zero characters "". The search results will never reset to display all results and you're stuck on "a" until you search for something else.