Hi guys,
1. What should be a simple thing I just can't figure out!
I am filtering my repeater properties by type and have them listed as either houses or hotels in the database and this works great. However I also have an "ALL' category in the dropdown which I want to list all properties obviously and I can't work out how to code this? I don't want to have to add ALL to every property as well so it needs to be identified somehow.
2. I need to reset the filters and repeaters after users try a searcg, probably by a button. How is this achieved?
![](https://static.wixstatic.com/media/a27d24_277629491ead4f7985470c32226b9e8a~mv2.png/v1/fill/w_980,h_582,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_277629491ead4f7985470c32226b9e8a~mv2.png)
Current Full code here:
import wixData from 'wix-data';
let originalPropertiesInfo = [];
let filteredResults = [];
$w.onReady(function () {
//Query to get the information from the database
wixData.query("Queensland")
.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) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.people;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
$w(`#text49`).text = itemData.description;
});
});
function filterResults() {
filteredResults = [];
const type = $w('#Type').value;
const guests = $w('#Guests').value;
const rooms = $w('#Rooms').value;
const bathrooms = $w('#Bathrooms').value;
if (type && type !== 'Choose type of accommodation') {
filteredResults = originalPropertiesInfo.filter(item => item.type === type);
}
if (guests && guests !== 'Choose number of guests') {
filteredResults = originalPropertiesInfo.filter(item => item.people >= guests);
}
//after the first if statement, the results is filtered by state
if (rooms && rooms !== 'Choose number of beds') {
filteredResults = originalPropertiesInfo.filter(item => item.bedrooms >= rooms);
}
if (bathrooms && bathrooms !== 'Choose number of bathrooms') {
filteredResults = originalPropertiesInfo.filter(item => item.bathrooms >= bathrooms);
}
//results is filtered by both guests and rooms
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, index) => {
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.people;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
$w(`#text49`).text = itemData.description;
});
}
export function refine_onClick(event, $w) {
filterResults();
}
@Yisrael (Wix) Having same type of issue using manage dataset and setting filter. https://www.ourozarks.com/tactical-self-defense
I give up!!
This original code does work, I just get rid of ALL and just have a reset button instead.
However If you select guests 3, it does filter out to have properties showing with 3 or more, but if you then pick 2 bedrooms, it filters out all the ones with less than 2 BUT DOESN'T remember the guests selection.
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) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.guests;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
});
});
function filterResults() {
filteredResults = [];
const type = $w('#Type').value;
const guests = $w('#Guests').value;
const rooms = $w('#Rooms').value;
const bathrooms = $w('#Bathrooms').value;
if (type && type !== 'Choose type of accommodation') {
filteredResults = originalPropertiesInfo.filter(item => item.type === type);
}
if (guests && guests !== 'Choose number of guests') {
filteredResults = originalPropertiesInfo.filter(item => item.guests >= guests);
}
//after the first if statement, the results is filtered by state
if (rooms && rooms !== 'Choose number of beds') {
filteredResults = originalPropertiesInfo.filter(item => item.bedrooms >= rooms);
}
if (bathrooms && bathrooms !== 'Choose number of bathrooms') {
filteredResults = originalPropertiesInfo.filter(item => item.bathrooms >= bathrooms);
}
//results is filtered by both guests and rooms
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, index) => {
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.guests;
$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 = 0;
$w("#Guests").selectedIndex = 0;
$w("#Rooms").selectedIndex = 0;
$w("#Bathrooms").selectedIndex = 0;
$w("#button6").hide();
filterResults();
}
This is an example of what the code for the query and getting your data items into the repeaters would look like:
const type = $w('#Type').value; const guests = $w('#Guests').value; const rooms = $w('#Rooms').value; const bathrooms = $w('#Bathrooms').value; wixData.query("myCollection") .eq("type", type) .eq("people", guests) .eq("rooms", rooms) .eq("bathrooms", bathrooms) .find() .then( (results) => { // use results here $w(`#repeater2`).data = results.items; } ) .catch( (error) => { let errorMsg = error.message; let code = error.code; } );
You should now be able to take this, add it to your site, and modify it to do what you want.
Ok thanks. So i just replace my const with your code? I used .ge instead of .eq if that makes sense. What would I put in the // use results here?
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) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.guests;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
});
});
function filterResults() {
filteredResults = [];
const type = $w('#Type').value;
const guests = $w('#Guests').value;
const rooms = $w('#Rooms').value;
const bathrooms = $w('#Bathrooms').value;
wixData.query("Properties")
.eq("type", type)
.ge("people", guests)
.ge("rooms", rooms)
.ge("bathrooms", bathrooms)
.find() .then( (results) => {
// use results here } )
.catch( (error) => {
let errorMsg = error.message; let code = error.code; } );
//results is filtered by both guests and rooms
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, index) => {
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.guests;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
});
}
export function refine_onClick(event, $w) {
filterResults();
}
The more direct way would be to apply the filters to the database query, and not to the results.
As I posted above, if you want to filter the query based on user selections, then you can do something like this:
const type = $w('#Type').value; const guests = $w('#Guests').value; const rooms = $w('#Rooms').value; const bathrooms = $w('#Bathrooms').value; wixData.query("myCollection") .eq("type", type) .eq("people", guests) .eq("rooms", rooms) .eq("bathrooms", bathrooms) .find() .then( (results) => { // use results here } ) .catch( (error) => { let errorMsg = error.message; let code = error.code; } );
Filtering the query limits the number of returned items which should probably improve performance. It also removes the headache of having to filter the results themselves.
Yisrael
It doesnt work and no, default would be ALL. I think my type is wrong too. Sorry I don't understand.
I think I have made it clearer here:
https://www.wix.com/code/home/forum/questions-answers/issues-with-filtering
So your default is "Hotel"? Did try this yet?
Thank you Yisrael.
I went with this:
if (type && type !== 'Choose type of accommodation') {
filteredResults = originalPropertiesInfo.filter(item => item.type === type);
} else $w("#dataset1").setFilter( wixData.filter()
.contains("House", "Hotel")
);
Does that look ok to you?
You can set a filter for a query on a database collection by using wix-data.WixDataFilter. You can set up a query with conditions which act as filters.
To get everything you would do something like this:
wixData.query("myCollection") .find() .then( (results) => { // use the results here } )
If you want to filter the query based on user selections, then you can do something like this:
wixData.query("myCollection") .eq("rooms", 3) .eq("baths", 2) .find() .then( (results) => { // use results here } ) .catch( (error) => { let errorMsg = error.message; let code = error.code; } );
Note: If you're using a dataset to connect to your collection, then you can use either wix-dataset.setFilter() or wix-data.filter.
Thanks Yisrael. So how would I skip the filter? Does my above code make sense
To query for all, skip the filter - no filter is the same as ALL.
To clear all of your filter selections, add the following onClick() function to your CLEAR button:
export function button1_click(event, $w) { //Add your code for this event here: $w("#selection1").selectedIndex = 0; // add code for other dropdown selection menus }
The above routine just needs to set all of the dropdown selection menus to the default value.
Thanks Yisrael!
I am still very much a newbie on this could you please help with an example?
Could I not just add an Else statement to my Type filter as above listing all types, e.g:
} else { filteredResults = originalPropertiesInfo.filter(item => item.type.contains("house", "hotel"));
This doesn't work unfortunately but something along those lines? I guess it doesn't work as my word 'ALL' isn't linked to anything?
or
else { wixData.query("Properties").contains("house", "hotel");
HELP!!!
Hi,
1. A couple ways to do this:
Have a checkbox that enables/disables refined search
Use a button that the user clicks to get "all"
I'm sure there are many more
2. You can have a CLEAR button that resets the fields in the onClick() function.
Good luck,
Yisrael