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.

​

​

Check this live example here

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; 

​