Hi,
I hope someone will be able to help. This is the case scenario:
The website is a real-estate one where users can filter properties through various options displayed via drop-downs, user inputs or check-boxes. The below code is from another article and works 100% except when it came to filter one specific column through multiple check-boxes.
In the example below, I want to be able to filter the property type by selecting one or more types via check-boxes (on a custom multiple choice drop-down that I created) . This is a simplified part of the code, there are 5 types of property in total, only 2 are displayed here but when I select more than 1 check-box there is no result.
import wixData from 'wix-data'; let originalPropertiesInfo = []; let filteredResults = []; $w.onReady(function () { wixData.query("Properties") .descending("_updatedDate") .find() .then((results) => { originalPropertiesInfo = results.items; $w("#repeater1").data = originalPropertiesInfo; }) .catch((err) => { let errorMsg = err; }); }); function filterResults() { filteredResults = []; const cat = $w('#dropdown1').value; // For Sell or For Rent const type = $w('#text15').text; // House const type2 = $w('#text17').text; // Plot of land const pricemin = parseInt($w('#input15').value,10); // Minimum Price const pricemax = parseInt($w('#input16').value,10); // Maximum Price filteredResults = originalPropertiesInfo.slice(); if (cat && cat !== 'For Sell / For Rent') {filteredResults = filteredResults.filter(item => item.category === cat);} if ($w("#checkbox2").checked===true) {filteredResults = filteredResults.filter(item => item.propertyType === type);} if ($w("#checkbox4").checked===true) {filteredResults = filteredResults.filter(item => item.propertyType === type2);} if (pricemin && pricemin !== 'Price min') {filteredResults = filteredResults.filter(item => item.price >= pricemin);} if (pricemax && pricemax !== 'Prix max') {filteredResults = filteredResults.filter(item => item.price <= pricemax);} if (filteredResults.length === 0){$w('#box9').show();} else $w('#box9').hide(); checkbox2_change(); checkbox4_change(); input15_change(); input16_change(); } export function checkbox2_change(event) {$w('#button3').onClick(() => { $w('#repeater1').data = filteredResults; $w('#repeater1').forEachItem(($w, itemData) => {$w('#input2').value = itemData.propertyType;})}); } export function checkbox4_change(event) {$w('#button3').onClick(() => {$w('#repeater1').data = filteredResults; $w('#repeater1').forEachItem(($w, itemData) => {$w('#input2').value = itemData.propertyType;}) });} export function input15_change(event) {$w('#button3').onClick(() => {$w('#repeater1').data = filteredResults; $w('#repeater1').forEachItem(($w, itemData) => {$w('#input18').value = itemData.price;})});} export function input16_change(event) {$w('#button3').onClick(() => {$w('#repeater1').data = filteredResults; $w('#repeater1').forEachItem(($w, itemData) => {$w('#input18').value = itemData.price;})});} // Search button export function button3_click(event, $w) { filterResults(); }
Thanks!
Hi,
Thanks for the feedback. Correct me if im wrong, in your example the query is on the column "type1" and "type2".
What I need is to query on a column let say call "types", and found "type1" when "checkbox1" is checked and/or "type2" when "checkbox2" is checked.
Hope this makes sense.
Hello,
If I understand you want a search filter for your repeater? Tell if I was wrong. But if its right, you can use .or function to create this filters (learn more here)
Start disconnecting the repeater from the dataset, that helps the query working with the checkboxes.
Then, add the code.
function fillRepeater() { wixData.query("Properties") .eq("type1", $w("#checkbox1").checked) .or( ) .or( ) wixData.query("Properties") .eq("type2", $w("#checkbox2").checked) wixData.query("Properties") .eq("moreHelp", $w("#checkbox4").checked) .find() .then((results) => { //console.log(results.items); let Properties = results.items; //console.log(services.length); $w('#repeater1').data = Properties; // fills the repeater }) } $w.onReady(function () { // Query to get the information from the database fillRepeater(); // Set the information to the repeater $w('#repeater1').onItemReady(($w, itemData) => { // Add here all the relevant elements of the repeater $w("#text19").html = itemData.description; $w('#image1').src = itemData.image; }); }); export function checkbox_changed(event, $w) { fillRepeater(); }
Hope it helps you ;)