Open Site Navigation

Dropdown Filters in Wix

Learn to filter your repeaters with dropdown inputs in Wix. This will allow your users to find what they are looking for a lot quicker.


Filter Repeaters with Dropdown Inputs in Wix

Before you insert the code, watch this video to learn how to properly set up your database and content:



Now that you have your site set up correctly, here is the code that you will need:


 

import wixData from 'wix-data'; export function searchButton_click(event) { search(); } function search() { wixData.query("Properties") .contains("propertieType", String($w("#dropdown1").value)) .and(wixData.query("Properties").contains("listingType", String($w("#dropdown2").value))) .find() .then(results => { $w("#propertiesRepeater").data = results.items; $w('#searchButton').hide(); $w('#resetButton').show(); $w('#resetButton').enable(); }); } export function resetButton_click(event) { $w('#propertiesDataset').setFilter(wixData.filter()); $w('#dropdown1').value = undefined; $w('#dropdown2').value = undefined; $w('#resetButton').hide(); $w('#searchButton').show(); }

 

Make sure you name your elements properly to ensure that the code works correctly. Or at least change the code to the names you used on your site.


Have Fun!