I am trying to make a site for a real estate company and I am trying to filter my repeater by state, city, and building type(for lease/for sale). To make things easier I put all the property information in one database. I want the drop down filters to pull from that one database. There would be a drop down for state, city, and building type(for lease/for sale). Once the state value is selected, then the second drop down should enable for the city value, then the third drop down should enable for building type value. I will add my code here:
import wixData from ‘wix-data’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("PropertyDetailPage")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.state);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w(“#dropdown2”).enable();
}
function uniqueDropDown2 (){
wixData.query("PropertyDetailPage")
.contains("city", $w("#dropdown1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.city);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdown2_change(event, $w) {
uniqueDropDown3();
$w(“#dropdown3”).enable();
}
function uniqueDropDown3 (){
wixData.query("PropertyDetailPage")
.contains("buildingType", $w("#dropdown2").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown3").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.buildingType);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
The second drop down enables after I choose the value of the state, but then when I click on that drop down the choices for city do not show. The filtering aspect of it does not work either. what am I doing wrong?