Filtering repeater - Filter one column through multiple check-boxes with an OR condition

Ask the community
,
1

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!

2

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 :wink:

3

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.