If anyone is trying to create a multiple field search with a dropdown (populated from a reference), I have managed to get the code from this example ( https://www.wix.com/corvid/example/search ) to work for me. I know it looks clumsy, but it works!
My page includes three text search boxes, a dropdown and a ‘clear’ button to clear the search fields. Follow the tutorial above, but make the changes according to my code sample - you can add as many fields as you like.
Here is my code:
import wixData from "wix-data";
$w.onReady(() => {
loadTypes();
});
let lastFilterTitle;
let lastFilterContact;
let lastFilterPostCode;
let lastFilterType;
let debounceTimer;
let debounceTimer2;
let debounceTimer3;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#iTitle').value, lastFilterContact, lastFilterPostCode, lastFilterType);
}, 500);
}
export function iContact_keyPress(event, $w) {
if (debounceTimer2) {
clearTimeout(debounceTimer2);
debounceTimer2 = undefined;
}
debounceTimer2 = setTimeout(() => {
filter(lastFilterTitle, $w('#iContact').value, lastFilterPostCode, lastFilterType);
}, 500);
}
export function iPostCode_keyPress(event) {
if (debounceTimer3) {
clearTimeout(debounceTimer3);
debounceTimer3 = undefined;
}
debounceTimer3 = setTimeout(() => {
filter(lastFilterTitle, lastFilterContact, $w('#iPostCode').value, lastFilterType);
}, 500);
}
export function iTypes_change(event, $w) {
filter(lastFilterTitle, lastFilterContact, lastFilterPostCode, $w('#iTypes').value);
}
function filter(title, contact, postcode, type) {
if (lastFilterTitle !== title || lastFilterContact !== contact || lastFilterPostCode !== postcode || lastFilterType !== type) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (contact)
newFilter = newFilter.contains('contact', contact);
if (postcode)
newFilter = newFilter.contains('postcode', postcode);
if (type)
newFilter = newFilter.contains('type', type);
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterContact = contact;
lastFilterPostCode = postcode;
lastFilterType = type;
}
}
function loadTypes() {
wixData.query('ProviderTypes')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Types'}];
options.push(...res.items.map(type => {
return {"value": type._id, "label": type.title};
}));
$w('#iTypes').options = options;
});
}
export function clear_click(event) {
$w('#iTitle , #iContact , #iPostCode , #iTypes').value = "";
$w('#dataset1').setFilter(wixData.filter())
}
