Hi Shlomi,
This is how I have my code. It works to filter when checkbox is checked, but if my user then unchecks the box the results remain (they don’t reset). Would you recommend a reset button or?
Thank you!
Hi Emma,
The Code above was meant for dropdowns 
With checkbox should check there is any filter applied for a category (at least a single checkbox in a group) please share the page you are building, ill have a look
Shlomi
Shlomi,
That makes so much more sense! Thank you.
Here is a link:
https://www.emmalparker.com/michigan-talent-database
(Please forgive the still-messy design, I’m working it out)
Here’s a screenshot also if that’s more helpful:
Thank you!
Emma
Hi Emma,
for each of your buildHeight checkboxes add the following function call to the onChange event:
export function filterChange(event, $w) {
let buildGroupChecked = $w("#filterinput9").checked || $w("#checkbox2").checked || $w("#checkbox3").checked || $w("#checkbox4").checked || $w("#checkbox5").checked;
console.log(buildGroupChecked);
var anyGroupChecked = buildGroupChecked;
if(anyGroupChecked){
if(buildGroupChecked){
var buildHeights = [];
if($w("#filterinput9").checked)
buildHeights.push($w("#filterinput9").value);
if($w("#checkbox2").checked)
buildHeights.push($w("#checkbox2").value);
if($w("#checkbox3").checked)
buildHeights.push($w("#checkbox3").value);
if($w("#checkbox4").checked)
buildHeights.push($w("#checkbox4").value);
if($w("#checkbox5").checked)
buildHeights.push($w("#checkbox5").value);
console.log(buildHeights);
$w('#dataset1').setFilter(wixData.filter().hasSome("buildHeight", buildHeights));
}
}else{
$w('#dataset1').setFilter(wixData.filter());
}
}
more groups should be added accordingly to set the filter dynamically
please let me know how it works for you,
Shlomi
Shlomi,
THANK YOU! It would have taken me ages to figure out that code on my own.
I do have one hiccup. If I check ‘short’ and ‘wiry’ it will give me the wiry people without also filtering for short. Should I code the two groups as one group? They are in separate columns in my database.
Here’s a picture of the code:
Also, I put the code on the ‘onChange’ for the filter button, not the individual checkboxes, correct? Thank you so much for your patience, as you can see I am not a coding master
Emma
Hi Emma,
personally i would avoid the button and use the function on any change of any of the checkboxes (one less click for the users) but is more of a UX question
please have a look at the code below:
import wixData from 'wix-data';
export function filterChange(event, $w) {
let buildGroupChecked = $w("#filterinput9").checked || $w("#checkbox2").checked || $w("#checkbox3").checked || $w("#checkbox4").checked || $w("#checkbox5").checked;
console.log(buildGroupChecked);
let frameGroupChecked = $w("#checkbox6").checked || $w("#checkbox7").checked || $w("#checkbox8").checked || $w("#checkbox9").checked || $w("#checkbox10").checked || $w("#checkbox11").checked || $w("#checkbox12").checked;
console.log(frameGroupChecked);
var filter = wixData.filter();
if(buildGroupChecked){
var buildHeights = [];
if($w("#filterinput9").checked)
buildHeights.push($w("#filterinput9").value);
if($w("#checkbox2").checked)
buildHeights.push($w("#checkbox2").value);
if($w("#checkbox3").checked)
buildHeights.push($w("#checkbox3").value);
if($w("#checkbox4").checked)
buildHeights.push($w("#checkbox4").value);
if($w("#checkbox5").checked)
buildHeights.push($w("#checkbox5").value);
console.log(buildHeights);
filter = filter.hasSome("buildHeight", buildHeights);
}
if(frameGroupChecked){
var buildFrame = [];
if($w("#checkbox6").checked)
buildFrame.push($w("##checkbox6").value);
if($w("#checkbox7").checked)
buildFrame.push($w("#checkbox7").value);
if($w("#checkbox8").checked)
buildFrame.push($w("#checkbox8").value);
if($w("#checkbox9").checked)
buildFrame.push($w("#checkbox9").value);
if($w("#checkbox10").checked)
buildFrame.push($w("#checkbox10").value);
if($w("#checkbox11").checked)
buildFrame.push($w("#checkbox11").value);
if($w("#checkbox12").checked)
buildFrame.push($w("#checkbox12").value);
console.log(buildFrame);
filter = filter.hasSome("buildFrame", buildFrame);
}
$w('#dataset1').setFilter(filter);
}
i have built it so it will be easier for you to figure out how to add more groups
good luck!
Shlomi
Shlomi,
Thank you so much! It works beautifully!
Where should I put the code for the dropdowns?
Emma, why won’t you also change them to
Shlomi,
I feel it is more user friendly to have checkboxes for the build and drop-downs for other search options. I considered having all checkboxes, but this makes the search too cluttered looking for the user. Also there is no ‘select all’ option for the dropdowns, which makes it impossible to change up a search without refreshing the whole window.
Thanks!
Hi Emma,
The example with the ‘G’ above will let be select all fir the dropdown, meaning wont filter by this criteria, so we can make that work.
It is just a matter of multiple select or not, your call
I’d anyway recommend you redesign the page to make it less clutter, maybe even enable hide/show of filters upon user click.
If you’ll still need help with checkboxes and dropdowns mixed, please let me know, ill be able to help you out with the code tomorrow,
Shlomi
Shlomi,
Thank you! I will look into a redesign and let you know what I need. Either way, I really appreciate all the help you have already given me!
Emma
Hey Shlomi,
Thank you so much for your help! Here’s a link to the website if you want to look at it: https://www.emmalparker.com/michigan-talent-database
I was wondering if there’s a way to code a ‘no items match your search query’?
Thank you!
Emma
Hi Emma,
looks really great! well done!
in the last section, alter the code and implement anything you’d like, like showing a text if there are no results and hiding it if there are
$w('#dataset1').setFilter(filter).then(function() {
let count = $w("#dataset1").getTotalCount();
if(count===0){
console.log("No results found");
}
});
Shlomi
Hi Shlomi,
This might be a tall order but could you share the steps and the code to filter the content of a repeater that is synced to a database?
I’ve already read all articles of the forum and watched the tutorials including this one https://www.youtube.com/watch?v=Hx7_8-lRsW0&index=32&list=PL0y_aclKYoYhBjCHf1hbj-I7sti3uC9rb, but I can’t make it work…
To start with, should this be made on a dynamic page or a regular one?
This is my page: https://andregfsnunes.wixsite.com/meusite/PersonalTrainers
And this is my code:
import wixData from “wix-data”;
$w.onReady(function () {
//TODO: write your page related code here…
});
export function input1_keyPress(event, $w) {
filter($w(“#input1”).value);
}
function filter(title) {
$w(“#dynamicDataset”).setFilter(wixData.filter().contains(“articleTitle”,title))
}
I’d really appreciate your help.
Hi Andre,
this thread is exactly about filtering of a repeater, it should not be done in a dynamic page. you can add a button or picture to each of the repeater items which will redirect to a dynamic page for that specific item. the entire collection can be done in a normal (non-dynamic) page
Shlomi
Andrea,
the following code should do the trick, also add a button to trigger the event
function filter(title,$w) {
console.log(title);
$w("#dynamicDataset").setFilter(wixData.filter().contains("title",title));
}
export function button3_click(event, $w) {
filter($w("#input1").value,$w);
}
Shlomi
Thank you very much for the swift reply Shlomi. I’ll try it out and as soon as possible I’ll tell you the result.
Hi Shomi,
Thank you! It’s thanks to your help
I put the code in at the bottom of my code and it’s not working. I tried changing it to have a vector object appear that I had collapsed/hidden on load. Any ideas on how to fix this? I don’t need to show a vector object, just something to let the viewer know that there are no results.
Thanks again for all of your help
Emma
Hi Shlomi,
I’m getting sooo frustrated with this… i’m still struggling to make it work.
How do I add a dynamicdataset to a regular page to start with? I can only add a Dataset.
Hi andre,
Dynamic data set is just a name, the Id emma decided to call her dataset thats all
Shlomi