Filter repeater based on Dropdown onChange

Ask the community
,
1

I got great help on how to use a query to populate a repeater. Now II want to add a dropdown to filter the repeater without having to invoke the query every time the dropdown changes.

I’m pretty clear on how to set up the dropdown and then using a series of if statements so the code “sees” the selection. What I can’t work out is how to apply the filter. Can anyone point me in the right direction? Thanks.

Here is the working code that populates the repeater.

import wixData from ‘wix-data’ ;
$w.onReady( function () {
wixData.query( “Projects2” )
.include( “categoryId” )
.eq( “projectsInclude” , true )
.limit( 30 )
.find()
.then((result) => {
$w( ‘#repeater2’ ).data = result.items;
})
$w( “#repeater2” ).onItemReady( ($item, itemData, index) => {
$item( ‘#text36’ ).text = itemData.projectName;
$item( ‘#text38’ ).text = itemData.projectDescription;
//$item(‘#text44’).text = itemData.projectDetails;
//$item(‘#text13’).text = itemData.categoryId._id;
//$item(‘#text40’).text = itemData.categoryId.categoryName;
//$item(‘#text43’).text = itemData._id;
$item( ‘#image5’ ).src = itemData.image1;
});
});

//This is the beginning of what I am trying to use to filter based on the dropdown selection
export function dropdown1_change_1(event) {
let dropdownValue = $w( ‘#drpCategory’ ).value
if (dropdownValue === “1” ) { //Select All
$w( “#dataset3” ).setFilter(wixData.filter().eq( “projectsInclude” , true ))
}

2

Perhaps this way.
Attention not tested, just some theoretical thoughts!

import wixData from'wix-data';

var query

$w.onReady(()=>{
   query = wixData.query("Projects2")         
  
   
   $w('#myDropDown').onChange(()=>{
      let dropdownValue = $w('#drpCategory').value
      
      if (dropdownValue === "1") {   //Select All         
         query.eq("projectsInclude",true)
         .eq("projectsInclude",true) 
         .include("categoryId")      
         .limit(30)
         .find()
         .then((result) => {
            let items = result.items
            console.log(items)	
            $w('#repeater2').data = items;
         });
      }
      else {   }
   });
   
   $w("#repeater2").onItemReady( ($item, itemData, index) => {          
      $item('#text36').text = itemData.projectName;         
      $item('#text38').text = itemData.projectDescription;        
      $item('#image5').src = itemData.image1;         
   });
3

Thanks. I’ll give this a try.