Combining Search Bars and Dropdown Menus on Wix

Ask the community
,
1

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 Likes
2

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

3

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().

4

@yisrael-wix , just out of curiosity, if you have several onReady() functions on the same page, will it keep the code order (i.e. will it execute the full first onReady() first and then the second onReady() etc…) ?

5

@jonatandor35 Ah - now you want to ask hard questions…

As far as I know it maintains the order. After discussing this with the “smart people” at Wix, I did some tests on my own. The code order was maintained. Hopefully this behavior will remain the same in future releases.

6

Hi Yisrael,

I am still new to web development using Wix. Could you please advise on the best practice to combine the onReady() functions using the above as an example?

7

@sorunkerm Simple, just combine them:

$w.onReady(() => {
    loadSectors();
    loadCountries();
    loadDurations();
});
8

@yisrael-wix Thank you!

9

@yisrael-wix Is there also a way to limit the number of downloads by a user in the database? I need to have a limitation on the number of documents each user can download from the database. Ideally, one download per user unless the user subscribes.

10

@ Yisrael (Wix)

Okay, an interesting little nugget of info there about the onReady function, thank you.

Plus, yes J.D., that was in my mind too after reading Yisrael’s reply and without it I would have liked to assume that they would have run in order through the code, however we can never assume anything with Wix!

Although to be honest, I would myself still prefer to keep to the one onReady function per page, especially if we have all been telling people in this forum that they have had multiple onReady functions in their code and can only use the one.

Finally, when you say you were talking to the ‘smart people’ in Wix, where you not just talking to yourself :wink:

11

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.

12

@givemeawhisky yes. Of course it’s better not to use an extra onReady(). One day they may decide that the second onReady() overrides the first one and then you’ll see some unexpected behavior and you won’t understand why.

13

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);