Live filtering repeater content

Ask the community
, ,
1

Hi!

I’m making a website where I would like to be able to filter which items appear in a repeater. I would like to use a drop down to let the user choose from a range of categories and then when the user selects an item the contents of the repeater is updated.

The contents of the repeater are items from a database table that stores locations. Each item in this table has a reference to another database table. The other database table simply contains a “Title” column, and stores some categories.

Currently I’ve managed to set it up so that the drop down displays the different categories, and the repeater displays locations filtered for the first location in the drop down list. But when I choose another category from the drop down the contents of the repeater are not updated.

Appreciate the help!

2

Hey there Axel.
Each dropdown menu has items and each item has a value.
Therefore if you set up onChange event handler for your dropdown menu and set if conditions for each your values, you can filter your dataset accordingly.

Let’s give an example:

import wixData from 'wix-data';
        
export function dropdown1_change() { //This happens when we change the dropdown value
    if ($w("#dropdown1").value) === "value1" { //and if we select first item in the dropdown
        $w('#dataset1').setFilter( wixData.filter()
        .eq('location', 'Liberland') ); //we set a filter on dataset1 to show the items 
                                        //which exactly has Liberland in location field
    if ($w("#"dropdown1").value) === "value2" {//...
    //you can chain if conditions like this
    }
}

Try to implement this on your page and let me know if it worked.

** Don’t forget to add your event via properties panel at the first place. Typing only the code won’t help.