Hey there! So I need to filter a repeater based on three criteria and a search bar. I have three dropdown menus and a search bar setup.
What I ended up doing was using code from a site my client had previously had made but decided to scrap. He liked the filters and wanted that to stay the same, though. I've got an exact copy of the code and setup for the filter but still can't seem to get it to work. Any help would be greatly appreciated and here is a copy of the code:
import wixData from "wix-data";
let lastFilterSheetName;
let lastBookNumber;
let lastGrade;
let lastSubject;
let debounceTime;
export function sSheetName_keyPress(event) {
//Add your code for this event here:
if(debounceTime){
clearTimeout(debounceTime);
debounceTime = undefined;
}
debounceTime = setTimeout(()=>{
filter($w('#sSheetName').value,lastBookNumber,lastGrade,lastSubject);
},200);
}
function filter(sheetName,bookNumber,grade,subject){ if(lastFilterSheetName !== sheetName || lastBookNumber !== bookNumber || lastGrade !== grade || lastSubject !== subject){ let finder = wixData.filter(); if(sheetName) finder = finder.contains('name', sheetName) .or(finder.contains('book',bookNumber)) .or(finder.contains('wsGrade', grade)) .or(finder.contains('wsSubject',subject)); if(bookNumber && bookNumber !== "All") finder = finder.eq('book', Number(bookNumber)); if(grade && grade !== "All") finder = finder.contains('wsGrade', grade); if(subject && subject !== "All") finder = finder.contains('wsSubject', subject); $w('#dataset1').setFilter(finder); lastFilterSheetName = sheetName; lastBookNumber = bookNumber; lastGrade = grade; lastSubject = subject; } } export function bookNumber_change(event) { //Add your code for this event here: if(debounceTime){ clearTimeout(debounceTime); debounceTime = undefined; } debounceTime = setTimeout(()=>{ filter(lastFilterSheetName,$w('#bookNumber').value,lastGrade,lastSubject); },200); } export function grade_change(event) { //Add your code for this event here: if(debounceTime){ clearTimeout(debounceTime); debounceTime = undefined; } debounceTime = setTimeout(()=>{ filter(lastFilterSheetName,lastBookNumber,$w('#grade').value,lastSubject); },200); } export function dropdown2_change(event) { //Add your code for this event here: //Add your code for this event here: if(debounceTime){ clearTimeout(debounceTime); debounceTime = undefined; } debounceTime = setTimeout(()=>{ filter(lastFilterSheetName,lastBookNumber,lastGrade,$w("#dropdown2").value); },200); // console.log($w("#dropdown2").value); }
Hey JD, thanks for the prompt reply! I had previously checked the element property id's were correct and just checked on the even handlers. Looks like on the original site there are no event handlers that the previous dev had specified so everything is looking like it should be working still.
First of all, check that the element property id's are correct, and that the event handlers on the property panel are turned on.