Did you connect the button to onClick event ?
No! I will try that, just connect in properties ie refine_onClick? Or do I need the code as well. Thanks for your patience I am still learning!
You need the code, I wrote it above
AHHH. Absolute legend. Thank you so much!!!
Last thing now, where and how do I write an IF statement that displays ‘there are no results matching your request’ or similar if there are 0 repeaters matching the results?
It sounds like you might want to brush up on using IF statements.
Try this:
And then use this example.
This should provide a stronger basis moving forward.
Good luck!
Roi
Hi Roi, hope you are well.
I am very close to completion on my code, but still not sure how to have an ‘all’ filter. Basically should just skip the filter if ‘All’ is selected. Can I do something like this with the if statement?
if (type && type !== ‘Choose type of accommodation’) {
filteredResults = filteredResults.filter(item => item.type === type);
}
else (skip filter?)
OR
if (type && type !== ‘All’) {filterResults()}
Here is my current code:
import wixData from ‘wix-data’;
let originalPropertiesInfo = [];
let filteredResults = [];
$w.onReady(function () {
//Query to get the information from the database
wixData.query(“Properties”)
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(#repeater2).data = originalPropertiesInfo;
})
.catch((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(#repeater2).onItemReady(($w, itemData) => {
//parseInt($w(‘#text53’).text = itemData.guests);
$w(‘#text53’).text = itemData.guests;
$w(#text52).text = itemData.title;
$w(‘#image2’).src = itemData.images;
$w(‘#text50’).text = itemData.bedrooms;
$w(‘#text51’).text = itemData.bathrooms;
});
});
function filterResults() {
filteredResults = [];
const type = $w(‘#Type’).value;
const guests = parseInt($w(‘#Guests’).value,10);
const rooms = parseInt($w(‘#Rooms’).value,10);
const bathrooms = parseInt($w(‘#Bathrooms’).value,10);
filteredResults = originalPropertiesInfo.slice();
if (type && type !== 'Choose type of accommodation') {
filteredResults = filteredResults.filter(item => item.type === type);
}
if (guests && guests !== 'Choose number of guests') {
filteredResults = filteredResults.filter(item => item.guests >= guests);
}
if (rooms && rooms !== 'Choose number of beds') {
filteredResults = filteredResults.filter(item => item.bedrooms >= rooms);
}
if (bathrooms && bathrooms !== 'Choose number of bathrooms') {
filteredResults = filteredResults.filter(item => item.bathrooms >= bathrooms);
}
if (filteredResults.length === 0){$w('#box3').show();}
else $w('#box3').hide();
Guests_change();
}
export function Guests_change(event) {
//filtering the results
//setting the data
$w(‘#repeater2’).data = filteredResults;
//setting the repeater elements
$w(‘#repeater2’).forEachItem(($w, itemData) => {
$w('#text53').text = itemData.guests;
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w('#text50').text = itemData.bedrooms;
$w('#text51').text = itemData.bathrooms;
});
}
export function refine_onClick(event, $w) {
filterResults();
$w(“#button6”).show();
}
export function button6_onClick(event, $w) {
$w(“#Type”).selectedIndex = ‘All’;
$w(“#Guests”).selectedIndex = 0;
$w(“#Rooms”).selectedIndex = 0;
$w(“#Bathrooms”).selectedIndex = 0;
$w(“#button6”).hide();
filterResults();
}
Roi are you around and able to finalise this last piece for me ?
Hi all, I am new to coding and web developing seek some advice from the community. Like TailoredWebdesign I am trying to filter my repeater, may I know how do you come out with the filter panel, ‘Refine Search’:
I can set up my repeater but not sure how to set up the refine search panel.
You can add Dropdowns from the user input section for that purpose.
Hi Tal,
Your code is working very well. I would like to know how to allow users for example to filter by multiple cities on item.propertyCity using checkboxes instead of a dropdown? How should I amend the code to cater for this?
Thank you in advance!
Hi Roi,
I would like to know how to allow users for example to filter by multiple cities on item.propertyCity using checkboxes instead of a dropdown? How should I amend the code to cater for this?
Thank you in advance!
LOTS of bugs on wix for this filtering on pages. I have an admin menu that I had spent about 2 weeks designing and building only to watch in horror as the filtering I set up using Tal’s way broke EVERY SINGLE TIME. I even tried using this on a separate site to see if maybe I had some code causing the issue and ALAS the bug still exists. If you set a repeater to a filter with onMouseIn, after you filter happens, the array breaks once you go to the new page. no error or syntax errors, just a break. The whole array then displays in the repeater without any logic. I have 5 more sites wanting the same solution and the datasets, and the arrays break. WHY!?
This is a very old post you are commenting on. Please repost your question in a new post so more people will see it. Clearly explain what you are trying to do and what you want to accomplish.
This post is being closed.
