Reset filters and Filter all

tailoredwebdesign · January 8, 2018, 10:14am

Hi guys,

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.
I need to reset the filters and repeaters after users try a searcg, probably by a button. How is this achieved?

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 · January 8, 2018, 10:26am

Hi,

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

You can have a CLEAR button that resets the fields in the onClick() function.

Good luck,

Yisrael

tailoredwebdesign · January 8, 2018, 11:22am

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!!!

yisrael-wix · January 8, 2018, 12:38pm

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.

tailoredwebdesign · January 8, 2018, 12:49pm

Thanks Yisrael. So how would I skip the filter? Does my above code make sense

yisrael-wix · January 8, 2018, 1:29pm

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.

tailoredwebdesign · January 8, 2018, 7:54pm

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?

yisrael-wix · January 9, 2018, 6:46am

So your default is “Hotel”? Did try this yet?

tailoredwebdesign · January 9, 2018, 6:50am

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:

yisrael-wix · January 9, 2018, 8:26am

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

tailoredwebdesign · January 9, 2018, 11:06am

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();
}

yisrael-wix · January 9, 2018, 11:25am

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.

tailoredwebdesign · January 9, 2018, 12:32pm

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();
}

jeff-haskins · September 13, 2018, 9:24pm

@yisrael-wix Having same type of issue using manage dataset and setting filter. https://www.ourozarks.com/tactical-self-defense

Topic		Replies	Views
Filter all Ask the community code , wix-hotels , question	3	348	January 7, 2018
Issues with Filtering Ask the community code , question	14	2161	May 6, 2019
Reset filter to show all results not working Ask the community code , question	2	554	September 2, 2019
Filtering repeaters Ask the community code , question	2	1404	January 4, 2018
No results on filter Ask the community code , question	5	743	May 6, 2018

Reset filters and Filter all

Related topics