top of page
Forum Posts
Ridwan Sorunke
Jul 15, 2019
In Coding with Velo
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;
});
}
2
12
501
Ridwan Sorunke
More actions
bottom of page