Repeater Drop-down Filter

Ask the community
,
1

I know this has been asked a million times but I have been at this for weeks and still can’t figure it out. I’ve watched dozens of video tutorials and followed lots of advice but still can’t get anywhere.

I’m working on this page: https://www.dfw-rc.org/projects

Essentially I’m trying to create a job board for volunteer opportunities using a repeater. All that is working great. But when I try to add a drop-down function filtering by “Charism” (a column in my dataset) it won’t work. I know this should be simple but I’m clearly missing something because I cannot figure it out.

This is how far I’ve gotten in my code today:

import wixData from “wix-data”;

$w.onReady( function () {
//TODO: write your page related code here…

});

export function charismsDropdown_change(event) {
let searchCharism = $w(“charismsDropdown”).value;
$w(“projects”).setFilter(wixData.filter().contains “charisms”, searchChrisms));
}
}
)}

Could someone please help?

2

Should they be the same spelling?
let searchCharism and searchChrisms));

Plus, have you read the setFilter api reference as that is a good start for info.
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#setFilter

A few previous forum posts that might help, plus a few over the top codes for you too.
https://www.wix.com/corvid/forum/community-discussion/filtering-repeater
https://www.youtube.com/watch?v=r0DLqkRDJ34 - video about filtering a repeater.

Wix Code Tutorial/Example - Simply open in Wix Editor and you can see all the elements laid out with all the code typed up for you to.
https://www.wix.com/corvid/example/search

3

920×450 152 KB

The Page

Repeater: #repeater1​​
User Input: #searchbar
Image Element: #searchicon​

The Database

Create a database: **Products ** (dataset1)
Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: ** producttype ** (for filtering)
    Then link fields to your repeater.

Page Code

import wixData from ‘wix-data’;

let debounceTimer;
export function searchbar_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#searchbar”).value);
}, 200);
}

let lastFilterSearch;

function filter(search) {
if (lastFilterSearch !== search) {
$w(“#dataset1”).setFilter(wixData.filter().contains(‘producttype’, search));
lastFilterSearch = search;
}
}

4

920×450 154 KB

The Page

Repeater: #repeater1​​
User Input: #searchbar
Dropdown: #dropdownfilter
Image Element: #searchicon​
Button Element: #resetbutton

The Database

Create a database: **Products ** (dataset1)
Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: ** producttype ** (for filtering)
    Then link fields to your repeater.

Page Code

import wixData from ‘wix-data’;

$w.onReady(() => {
wixData.query(‘Type’)
.find()
.then(res => {
let options = [{“value”: “”, “label”: “All Types”}];
options.push(…res.items.map(type => {
return {“value”: type.search,“label”: type.search};
}));
$w(“#dropdownfilter”).options = options;
})
});

let lastFilterSearch;
let lastFilterType;
let debounceTimer;

export function searchbar_keyPress(event, $w) {
//Add your code for this event here:
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#searchbar”).value, lastFilterType);
},200);

}

function filter(search, type) {
if (lastFilterSearch !== search || lastFilterType !== type) {
let newFilter = wixData.filter();
if(search)
newFilter = newFilter.contains(‘product’,search);
if(type)
newFilter = newFilter.eq(‘producttype’, type);

$w("#dataset1").setFilter(newFilter); 
lastFilterSearch = search; 
lastFilterType = type; 
}

}

export function dropdownfilter_change(event, $w) {
filter(lastFilterSearch, $w(“#dropdownfilter”).value);
}
​
export function resetbutton_click(event, $w) {
$w(“#dropdownfilter”).value = undefined;
$w(“#searchbar”).value = undefined;
$w(“#dataset1”).setFilter(wixData.filter());
}

5

920×450 152 KB

920×450 54.7 KB

The Page

Repeater: #repeater1​​
User Input: #searchbar
Dropdown: #dropdownfilter
Image Element: #searchicon​

The Database

Create a database: **Products ** (dataset1)
Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: ** producttype ** (for filtering)
    Then link fields to your repeater.

Page Code

import wixData from ‘wix-data’;
​
// Set Dropdown Options //
​
$w.onReady(() => {
wixData.query(‘Type’)
.find()
.then(res => {
let options = [{“value”: “”, “label”: “All Types”}];
options.push(…res.items.map(type => {
return {“value”: type.search,“label”: type.search};
}));
$w(“#dropdownfilter”).options = options;
})
});

let lastFilterSearch;
let lastFilterType;
let debounceTimer;
​
// Search Bar //
export function searchbar_keyPress(event, $w) {
​
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#searchbar”).value, lastFilterType);
},200);

}
​
// Set Filters //
​
function filter(search, type) {
if (lastFilterSearch !== search || lastFilterType !== type) {
​
let newFilter = wixData.filter();
​
if(search)
newFilter = newFilter.contains(‘product’,search);
​
if(type)
newFilter = newFilter.eq(‘producttype’, type);

$w("#dataset1").setFilter(newFilter);

​
lastFilterSearch = search;
lastFilterType = type;
​
}
}
​
// Dropdown Filter //
​
export function dropdownfilter_change(event, $w) {
filter(lastFilterSearch, $w(“#dropdownfilter”).value);
}

For More Filters

import wixData from ‘wix-data’;

let lastFilter1;
let lastFilter2;
let lastFilter3;
​
// Set Filters //
​
function filter(filter1, filter2, filter3) {
if (lastFilter1 !== filter1 || lastFilter2 !== filter2 || lastFilter3 !== filter3) {
​
let newFilter = wixData.filter();
​
if(filter1)
newFilter = newFilter.contains(‘item1’, filter1);
​
if(filter2)
newFilter = newFilter.eq(‘item2’, filter2);

    if(filter3) 
        newFilter = newFilter.ge('item3', filter3);

​
$w(“#dataset1”).setFilter(newFilter);
​
lastFilter1 = filter1;
lastFilter2 = filter2;
lastFilter3 = filter3;
​
}
}
​
// Dropdown Filters //
// NOTE: The order of the filter functions are important; lastFilter1, lastFilter2, lastFilter3 //
​
export function dropdown1_change(event, $w) {
filter($w(“#dropdown1”).value, lastFilter2, lastFilter3);
}
​
export function dropdown2_change(event, $w) {
filter(lastFilter1, $w(“#dropdown2”).value, lastFilter3);
}
​
export function dropdown3_change(event, $w) {
filter(lastFilter1, lastFilter2, $w(“#dropdown3”).value);
}