I have not been able to apply the video Wix Code | How to Create a Search for Your Database - YouTube “Wix Code | How to Create a Search for Your Database” to create a multiple dropdown menu filtering.
The video moves way too fast and does not use a dataset which is problematic since I upload all of my tutor’s information via a dataset. I want to be able to filter non-sequential from all the options: City, Subject, University. I want to be able to filter down without the lag associated with the website. I also want to be able to undo an option.
For reference: https://www.kahltutoring.com/team this is what my website looks like.
I am VERY new to coding as in this is my first shot. Can someone help me?
This is what I tried:
import wixData from “wix-data”;
$w.onReady(() => {
wixData.query(‘City’)
.find()
.then()
Let options = [{“value”}]: ‘’, ‘label’: ‘All Citys’}];
options.push(…res.items.map(city => {
return {‘value’: city.title, ‘label” : city.title};
}));
$w(‘#iCity’).options = options;
})
});
$w.onReady(() => {
wixData.query(‘Subject’)
.find()
.then()
Let options = [{“value”}]: ‘’, ‘label’: ‘All Subjects’}];
options.push(…res.items.map(subject => {
return {‘value’: subject.title, ‘label” : subject.title};
}));
$w(‘#iSubject’).options = options;
})
});
$w.onReady(() => {
wixData.query(‘University’)
.find()
.then()
Let options = [{“value”}]: ‘’, ‘label’: ‘All Universitys’}];
options.push(…res.items.map(university => {
return {‘value’: university.title, ‘label” : university.title};
}));
$w(‘#iUniversity’).options = options;
})
});
let lastFilterCity;
let lastFilterSubject;
let lastFilterUniversity
function filter(city, subject, university)
if (lastFilterCity !== city || lastFilterSubject !==subject || lastFilterUniversity !== university) {
let newFilter = wix.dat.filter();
if (city)
newFilter = newFilter.eq(‘city’, city);
if (subject)
newFilter = newFilter.eq(‘subject’, subject);
if (university)
newFilter = newFilter.eq(‘university’, university);
$w(‘#dataset1’).setFilter(newFilter)
lastFilterCity = city;
lastFilterSubject = subject;
lastFilterUniversity = university;
}
}
export function iCity_change(event, $w) {
filter($w(‘#iCity’).value, lastFilterSubject, lastFilterUniversity);
}
export function iSubject_change(event, $w) {
filter(lastFilterCity, $w(‘#iSubject’).value, lastFilterUniversity);
}
export function iUniversity_change(event, $w) {
filter(lastFilterCity, lastFilterSubject, $w(‘#iUniversity’).value);
}