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?
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);
}
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());
}
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;
}
}
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