Hi everyone,
I’m trying to make a modified version of the tutorial shown here:
https://www.wix.com/corvid/forum/wix-tips-and-updates/how-to-create-a-search-for-your-database
Instead of having one search box and one drop down box, i would like to have 2-3 drop down boxes. But am unsure how to modify my code because the 2nd and 3rd drop down boxes do not filter the way the first one does. I think my problem is to do with the function filter(title, category, region) statement and using the multiple OR statements.
The website page is here:
https://ashfromashburton.wixsite.com/content/mid-canterbury-region
The hike name and hike type filters work correctly as per the You Tube video but when I try change the Region filter, then it doesn’t filter anything and just turns the screen white.
I want to only show the results that match all of the four filters. But I don’t need cascading filters so that the selection in one affects the other; the filters will always show all of the possible options.
The code is below:
import wixData from “wix-data” ;
$w.onReady(() => {
loadContinents();
loadRegions();
});
let lastFilterTitle;
let lastFilterContinent;
let lastFilterRegion;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iTitle’ ).value, lastFilterContinent, lastFilterRegion);
}, 200 );
// Add your code for this event here:
}
function filter(title, category, region) {
if (lastFilterTitle !== title || lastFilterContinent !== category || lastFilterRegion !== region) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’,title);
if (category)
newFilter = newFilter.eq(‘category’,category);
if (region)
newFilter = newFilter.eq(‘region’,region);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterContinent = category;
lastFilterRegion = region;
}
}
function loadRegions() {
wixData.query( ‘Items’ )
.distinct( “region” )
.then(res => {
let distinctListr = buildOptions(res.items);
distinctListr.unshift({ “value” : ‘’ , “label” : ‘All Continents’ });
$w( ‘#iRegion’ ).options = distinctListr;
});
}
function loadContinents() {
wixData.query( ‘Items’ )
.distinct( “category” )
.then(results => {
let distinctList = buildOptions(results.items);
distinctList.unshift({ “value” : ‘’ , “label” : ‘All Continents’ });
$w( ‘#iType’ ).options = distinctList;
});
}
function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}
export function iRegion_change(event, $w) {
filter (lastFilterRegion, $w( ‘#iRegion’ ).value);
// Add your code for this event here:
}
export function iType_change(event, $w) {
filter (lastFilterTitle, $w( ‘#iType’ ).value);
// Add your code for this event here:
}
