Basically I want to put a Booking.com style search engine where the user can search for different items from a predefined list. Currently in Webflow it only allows to select from the dropdown but it doesn’t allow to search.
Also depending on what one selects in the first box, it should condition what can come up in the following search boxes. And at the end the final button or submit form button should let you create a customizable cURL to send to a different page with the inputs of the previous form parameters.
You can easily achieve this with third party form solutions, but the problem is that the CSS is quite difficult to implement if you are only going to do it in one part of the home page section, and I see that it is easier to make a part of the form and redirect it to a different one.
So this solution has multiple parts to it & could vary based on how complex you need it.
1. Creating a searchable select dropdown:
Implementing something like Select2.js would work.
2. Showing different select options based on the value of the first select box:
One way would be a script that checks the value of the first select & sets to show the 2nd select element w/ a matching id. Check out this solution on how to do it. However, this would require creating a select element & it’s options for each possibility.
To get around this, another way would be using Select2.js again to populate the options of the second select dropdown dynamically. This would require more javascript but only needs 1 select element.
3. Redirecting user to a URL created by the form input
Run a script on form submit that sets location.href to the new URL. Example w/ JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$("#form-id").submit(function(){
let value1 = $("#select-id1").val();
let value2 = $("#select-id2").val();
$( document ).ajaxComplete(function() {
//Use the values to determine the url & set location.href = url
});
});
});
</script>
It’s going to take some getting dirty w/ code but hope this info helps give some direction!
Luke’s advice is spot on if you need to build this custom.
But ( especially ) if the data you’re working with is in the CMS, you might just need a good CMS filter.
You can build a pretty good UI with date range filters, location filters, category filters all using Webflow’s CMS + Finsweet’s CMS Load and CMS Filter.
