Repeater filter not working propperly

Ask the community
,
1

Hi

I have a repeater with an option to filter the repeater with one text input field (‘#iTitle’) and three dropdown menus (‘#landen’, ‘#stedenbe’, ‘#stedenned’) . I thought I did great, but it’s not working propperly. The inputs are not working together and dropdown ‘landen’ is not working at all. This is my code:

import wixData from "wix-data";

$w.onReady(() => {
  loadlanden();
  loadstedenned();
  loadstedenbe();
});

let lastFilterTitle;
let lastFilterlanden;
let lastFilterstedenbe;
let lastFilterstedenned;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterlanden, lastFilterstedenbe, lastFilterstedenned);  
  }, 500);
}

export function landen_change(event, $w) {
   filter(lastFilterTitle, lastFilterstedenbe, lastFilterstedenned, $w('#landen').value);
}
export function stedenbe_change(event, $w) {
   filter(lastFilterTitle, lastFilterlanden, lastFilterstedenned, $w('#stedenbe').value);
}

function filter(title, landen, stedenbe, stedenned) {
 if (lastFilterTitle !== title || lastFilterlanden !== landen || lastFilterstedenbe !== stedenbe || lastFilterstedenned !== stedenned) {
 let newFilter = wixData.filter();
 if (stedenned) 
      newFilter = newFilter.contains('stad', stedenned);
 if (stedenbe) 
      newFilter = newFilter.contains('stad', stedenbe);    
 if (title)
      newFilter = newFilter.contains('title', title);
 if (landen)
      newFilter = newFilter.contains('land', landen);
    $w('#dataset1').setFilter(newFilter);    
    lastFilterTitle = title; 
    lastFilterlanden = landen;
    lastFilterstedenbe = stedenbe;
    lastFilterstedenned = stedenned;
  }
}

function loadlanden() {
  wixData.query('landen')
     .find()
     .then(res => {
 let options = [{"value": '', "label": 'Alle landen'}];
      options.push(...res.items.map(landen => {
 return {"value": landen.title, "label": landen.title};
      }));
      $w('#landen').options = options;
     });

}

function loadstedenbe() {
  wixData.query('stedenbe')
     .find()
     .then(res => {
 let options = [{"value": '', "label": 'Alle steden'}];
      options.push(...res.items.map(stedenbe => {
 return {"value": stedenbe.title, "label": stedenbe.title};
      }));
      $w('#stedenbe').options = options;
     });

}

function loadstedenned() {
  wixData.query('stedenned')
     .find()
     .then(res => {
 let options = [{"value": '', "label": 'Alle steden'}];
      options.push(...res.items.map(stedenned => {
 return {"value": stedenned.title, "label": stedenned.title};
      }));
      $w('#stedenned').options = options;
     });

}

export function stedenned_change(event, $w) {
   filter(lastFilterTitle, lastFilterlanden, lastFilterstedenbe, $w('#stedenned').value);
}

Here is the live site: https://leonmissoul5.wixsite.com/mysite/kappers so you can see how it’s not working.

I hope I’m clear and someone can help me.

Thanks in advance! I really appreciate all the help i’m getting on this forum!

2

Hey Leon,

We have a complete tutorial and a video that show how to set up exactly what you are looking for.

Corvid Tutorial: Adding Collection Data Search Functionality

Video Tutorial

Hope this helps!

Dara | Corvid Team