I am trying to recreate this search bar effect with results popping up when the search bar is text highlighted. Using Jetboost for the filtering and delivering of results.
Any idea on where to find a (cloneable) example of such a search bar, or a instruction?
I did something similar for our Help Center with a search bar and results pop up underneath it.
The way I did it was using Jetboost’s real-time search and an additional power up which gives you a class for any element which you want to only show when someone is typing in the search. Then you position that element directly under the search bar (with position absolute) and style it how you want.
Let me know if that isn’t clear and I’ll share a more detailed walkthrough!
Not the OP, but I'd love a more detailed walkthrough. I'm implementing a similar setup at the moment, and I'm sure tons of others are doing the same. I'm happy to buy you a coffee for your time :)
Create a new "Results" div (this will contain your search results)
Give this div the same width as the search bar and set it to position: absolute
Inside this new div add your collection list to search through
Style the collection list items how you'd like each result to appear when someone searches. Make sure to give it a high enough z-index so it doesn't get covered by other elements
When you've finished styling, set the Results div to display: none
Connect the search bar and list wrapper to Jetboost's real-time search feature
To get the results to show up only when a user is searching, go to the Jetboost booster settings -> Power Ups -> Search is active. Add that extra class to the Results div class list.
Lastly, to get each result to more closely match the style of the Airbnb search, you could use the "Search highlighting" power up booster in Jetboost. I haven't used this myself but it seems straightforward enough.
If you get stuck at any point feel free to reply here or DM me.
I am trying to recreate this search bar effect with results popping up when the search bar is text highlighted. Using Jetboost for the filtering and delivering of results.
Any idea on where to find a (cloneable) example of such a search bar, or a instruction?
I did something similar for our Help Center with a search bar and results pop up underneath it.
The way I did it was using Jetboost’s real-time search and an additional power up which gives you a class for any element which you want to only show when someone is typing in the search. Then you position that element directly under the search bar (with position absolute) and style it how you want.
Let me know if that isn’t clear and I’ll share a more detailed walkthrough!
Not the OP, but I'd love a more detailed walkthrough. I'm implementing a similar setup at the moment, and I'm sure tons of others are doing the same. I'm happy to buy you a coffee for your time :)
Sure! Here's how I did our search bar:
Lastly, to get each result to more closely match the style of the Airbnb search, you could use the "Search highlighting" power up booster in Jetboost. I haven't used this myself but it seems straightforward enough.
If you get stuck at any point feel free to reply here or DM me.
Thanks dude, I appreciate your time spent on this. I'll let you know how I get on!
Thank you so much! That was exactly the input I was looking for.
Happy to help :)