Question:
I’m new to Wix and trying to code my repeater based on 2 dropdowns added to the list page and cannot get it to filter the results when clicking the Search button
Product:
Wix Editor
Both the state and lakename are pulling from 2 databases (StateDB & LakeDB1) - this is working perfect. The repeater is linked to my CMS database called “import791” - Here is my code:
import wixData from 'wix-data';
$w.onReady(function () {
initPage();
});
async function initPage() {
const StateLakes = {};
wixData.query('StateDB')
.ascending('title')
.find()
.then(results => {
const stateOptions = results.items.map(state => ({ label: state.title, value: state._id }));
$w('#stateDropdown').options = stateOptions;
});
$w('#stateDropdown').onChange(async () => {
let hasLakes = false;
const selectedState = $w('#stateDropdown').value;
if (StateLakes[selectedState]) {
hasLakes = true;
$w('#lakeDropdown').options = StateLakes[selectedState];
} else {
const results = await wixData.query('LakeDB1')
.eq('state', selectedState)
.ascending('title')
.find()
if (results.length > 0) {
hasLakes = true;
const lakeOptions = results.items.map(lake => ({ label: lake.title, value: lake._id }));
$w('#lakeDropdown').options = lakeOptions;
StateLakes[selectedState] = lakeOptions;
}
}
if (hasLakes) {
$w('#lakeDropdown').selectedIndex = undefined;
$w('#lakeDropdown').expand();
$w('#searchButton').disable();
} else {
$w('#lakeDropdown').collapse();
$w('#searchButton').enable();
}
});
let dDown = $w('#lakeDropdown');
$w('#lakeDropdown').onChange(() => {
$w('#searchButton').enable();
let index = $w('#lakeDropdown').selectedIndex; // Get the selected index
let itemOptions = $w('#lakeDropdown').options[index] // get the selected item
let itemLabel = itemOptions.label; // grab the label of selected object
let itemValue = itemOptions.value; // grab the value of selected object
console.log("Label = " + itemLabel) // the label of the selected dropdown item
console.log("Value = " + itemValue) // the value of the selected dropdown item
});
}
export function searchButton_click(event) {
search();
}
function search() {
const selectedState = $w('#stateDropdown').value;
let index = $w('#stateDropdown').selectedIndex; // Get the selected index
let itemOptions = $w('#stateDropdown').options[index] // get the selected item
let itemLabel = itemOptions.label; // grab the label of selected object
let itemValue = itemOptions.value; // grab the value of selected object
console.log("Label = " + itemLabel) // the label of the selected dropdown item
console.log("Value = " + itemValue) // the value of the selected dropdown item
wixData.query("import791")
.contains("state", String($w("#stateDropdown").value))
.and(wixData.query("import791").contains("lakeName", String($w("#lakeDropdown").value)))
.find()
.then(results => {
$w("#listRepeater").data = results.items;
});
}
export function resetButton_click(event) {
$w("#dynamicDataset").setFilter(wixData.filter())
$w("#stateDropdown").value = undefined;
$w("#lakeDropdown").value = undefined;
}
