Mega Search
Filter items by various criteria using dropdowns and sliders.
Intermediate
Last updated: 14 Sept 2025
About
In this example, we create a filter bar that visitors can use to filter yacht charters by location, yacht type, amounts of guests and bedrooms, and price range.
APIs
How we built it
We added the following to our site:
Page Elements
Home Page
- A repeater for displaying quiz questions and answers.
- Buttons to open the quiz and submit quiz answers.
- Text to display the total score.
Collections
Yachts: A collection of charters, with the following fields:
- Location
- Yacht type
- Guests
- Bedrooms
- Price
- Thumbnail image
Page Elements
- Dropdowns for visitors to select location, yacht type, guests, and bedrooms.
- Sliders for visitors to select minimum and maximum prices.
- A repeater to display a list of charters.
- A container to display a message when no items match the chosen criteria.
- A button to reset all filter selections.
Frontend Code
Home
The code in this file allows visitors to use the dropdowns and sliders to filter the list of yacht charters. The code displays the charters in a repeater, sets up available options for the selection elements, and lets visitors filter the displayed charters using these elements.
In this file, we:
- Populate the dropdowns with options based on values that exist in the collection’s items.
- Set the maximum value for the max price slider to change depending on the chosen yacht type.
- Configure the repeater items to reflect the collection’s items.
- Display all charters from the collection in the repeater.
- Attach a debounced filter handler to all selection elements, meaning:
- Selecting a value starts a brief delay during which the repeater will not be updated, to avoid unnecessary function calls during rapid input.
- After the delay, a filter function executes. This function filters out any charters that don’t meet the selection criteria, and then displays the appropriate element:
- If any charters remain, the function fills the repeater with those charters, expands the repeater, and then collapses the message container.
- Otherwise, the function empties the repeater, collapses the repeater, and then expands the message container showing that no items match the selected criteria.
- Set up the button to reset the page when clicked, by changing all selection elements to their default values and displaying all charters in the repeater.
Code Snippets
Home
Get Help
Join the community
Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.
Hire a developer
Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.