Welcome Text
You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already
MULTIPLE FILTER
LEARN HOW TO CREATE A MULTIPLE DROPDOWN FILTER
This code will show you how to create a multiple filter using more than one dropdown.
We will need the followings:
- more than 1 dropdown
- repeater
- dataset
- reset button
- loading gif (to be hidden on load)
- counting text (to be hidden on load)
- activate the onItemReady event of the repeater
For this example we will be using six dropdown. Whenever a dropdown changes the repeater will filter its elements based on all dropdown values chosen. We will also format the price field key into a $ price.
This is the code given in the live example.
Once you replace these IDs with yours your code should look like this one below.
import wixData from 'wix-data';
$w.onReady(() => {
$w('#dataset1').onReady(() => {
count();
$w('#propertyDp , #townDp , #bedroomsDp , #bathroomsDp ,#priceFromDp , #priceToDp').onChange(() => {
$w("#clear").show();
search();
})
$w('#clear').onClick(() => {
$w("#clear").hide();
$w("#loadingGif").show();
$w('#propertyDp , #townDp , #bedroomsDp , #bathroomsDp ,#priceFromDp , #priceToDp').value = "";
$w('#dataset1').setFilter(wixData.filter())
.then(count);
});
function search() {
$w("#loadingGif").show();
let filter = wixData.filter();
let property = $w("#propertyDp").value;
let town = $w("#townDp").value;
let bedrooms = Number($w("#bedroomsDp").value);
let bathrooms = Number($w("#bathroomsDp").value); //By using Number before $w we convert the value into a number from text
let priceFrom = Number($w("#priceFromDp").value); //By using Number before $w we convert the value into a number from text
let priceTo = Number($w("#priceToDp").value); //By using Number before $w we convert the value into a number from text
if (property && property !== "") {
filter = filter.eq("propertyType", property);
}
if (town && town !== "") {
filter = filter.eq("town", town); //town is my field key
}
if (bedrooms && bedrooms !== "") {
filter = filter.eq("bedrooms", bedrooms); //bedrooms is my field key
}
if (bathrooms && bathrooms !== "") {
filter = filter.eq("bathrooms", bathrooms); //bathrooms is my field key
}
if (priceFrom && priceFrom !== "") {
filter = filter.ge("price", priceFrom); //price is my field key
}
if (priceTo && priceTo !== "") {
filter = filter.le("price", priceTo); //price is my field key
}
$w('#dataset1').setFilter(filter)
.then(count);
}
function count() {
let total = $w('#dataset1').getTotalCount();
if (total > 1) {
$w('#textCount').text = `${total} result were found.`;
$w("#loadingGif").hide();
}
if (total === 1) {
$w('#textCount').text = `${total} result was found.`;
$w("#loadingGif").hide();
}
if (total === 0) {
$w('#textCount').text = "No result found!";
$w("#loadingGif").hide();
}
}
});
});
export function repeater1_itemReady($item, itemData, index) {
let currentPrice = itemData.price; // price is my field key
let newPrice = "$" + formatNumber_AsDollar(currentPrice);
$item("#priceText").text = newPrice;
}
function formatNumber_AsDollar(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Your code should look like the 3 pictures in the gallery below
*** VERY IMPORTANT ***
- Do not activate any onChange event for the dropdown
- Activate the onItemReady event of the repeater and write this code inside:
let currentPrice = itemData.price; //price is my field key
let newPrice = "$" + formatNumber_AsDollar(currentPrice);
$item("#priceText").text = newPrice;