This should help you combine multiple search types with your database on Wix.
Changeable parameters are sector, country, duration, and title.
One Search Bar and Two Drop Down Search
import wixData from "wix-data";
$w.onReady(() => {
loadSectors();
});
$w.onReady(() => {
loadCountries();
});
let lastFilterTitle;
let lastFilterSector;
let lastFilterCountry;
let debounceTimer;
export function ititle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#ititle').value, lastFilterSector, lastFilterCountry);
}, 500);
}
export function isector_change(event) {
filter(lastFilterTitle, $w('#isector').value, lastFilterCountry);
}
export function icountry_change(event) {
filter(lastFilterTitle, lastFilterSector, $w('#icountry').value);
}
function filter(title, sector, country) {
if (lastFilterTitle !== title ||
lastFilterSector !== sector ||
lastFilterCountry !== country) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (sector)
newFilter = newFilter.contains('sector', sector);
if (country)
newFilter = newFilter.contains('country', country);
$w('#routerDataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterSector = sector;
lastFilterCountry = country;
}
}
function loadSectors() {
wixData.query('Sectors')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Sectors'}];
options.push(...res.items.map(sector => {
return {"value": sector.title, "label": sector.title};
}));
$w('#isector').options = options;
});
}
function loadCountries() {
wixData.query('Countries')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Countries'}];
options.push(...res.items.map(country => {
return {"value": country.title, "label": country.title};
}));
$w('#icountry').options = options;
});
}
One Search Bar and Three DropDowns
import wixData from "wix-data";
$w.onReady(() => {
loadSectors();
});
$w.onReady(() => {
loadCountries();
});
$w.onReady(() => {
loadDurations();
});
let lastFilterTitle;
let lastFilterSector;
let lastFilterCountry;
let lastFilterduration;
let debounceTimer;
export function ititle1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#ititle1').value, lastFilterSector, lastFilterCountry, lastFilterduration);
}, 500);
}
export function isector1_change(event) {
filter(lastFilterTitle, $w('#isector1').value, lastFilterCountry, lastFilterduration);
}
export function icountry1_change(event) {
filter(lastFilterTitle, lastFilterSector, $w('#icountry1').value, lastFilterduration);
}
export function iduration1_change(event) {
filter(lastFilterTitle, lastFilterSector, lastFilterCountry, $w('#iduration1').value);
}
function filter(title, sector, country, duration) {
if (lastFilterTitle !== title ||
lastFilterSector !== sector ||
lastFilterCountry !== country ||
lastFilterduration !== duration) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (sector)
newFilter = newFilter.contains('sector', sector);
if (country)
newFilter = newFilter.contains('country', country)
if (duration)
newFilter = newFilter.contains('duration', duration);
$w('#dynamicDataset').setFilter(newFilter);
lastFilterTitle = title;
lastFilterSector = sector;
lastFilterCountry = country;
lastFilterduration = duration;
}
}
function loadSectors() {
wixData.query('Sectors')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Sectors'}];
options.push(...res.items.map(sector => {
return {"value": sector.title, "label": sector.title};
}));
$w('#isector1').options = options;
});
}
function loadCountries() {
wixData.query('Countries')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Countries'}];
options.push(...res.items.map(country => {
return {"value": country.title, "label": country.title};
}));
$w('#icountry1').options = options;
});
}
function loadDurations() {
wixData.query('Durations')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Durations'}];
options.push(...res.items.map(duration => {
return {"value": duration.title, "label": duration.title};
}));
$w('#iduration1').options = options;
});
}
@Ridwan Sorunke Simple, just combine them:
$w.onReady(() => { loadSectors(); loadCountries(); loadDurations(); });
thanks for the great work !
Trying to work this code into my search page....one thing not sure off; this database ? $w('#dynamicDataset').setFilter(newFilter);
If it is for site members to download then in theory you have the users id and so could potentially track the downloads and once they get to a certain number, make the download button be disabled and maybe have a text box appear with something like download limit reached' etc
For new subscribers, you could simply make it that they can't download it until they have subscribed or became a site member.
I'll let you in on a secret...
I researched this and although it's ugly (IMHO), it's OK to have multiple onReady() functions for a page. All of the code from the multiple onReady() function is accumulated into one "chunk" of code. I believe earlier versions of Corvid (nee` Wix Code) did not do this. So, you're free to do this if you want, but it's probably "best practice" to use just one onReady().
Thanks Ridwan, however why have you got multiple onReady functions at the start of each when you should have just the one?
https://www.wix.com/corvid/reference/$w.html#onReady
Wix's own tutorial for this sort of thing only has the one onReady function.
https://www.wix.com/corvid/example/search