If you are wanting code then here is an example of sorting a repeater with multiple filters:
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);
}
You can use the following code to reset all filters. For pre-filtered inputs, change the “undefined” values to your pre-filtered values.
export function resetbutton_click(event, $w) {
$w("#dropdownfilter").value = undefined;
$w("#searchbar").value = undefined;
$w("#dataset1").setFilter(wixData.filter());
}