Filtering Repeater with Multiple Selection Tags

Ask the community
,
1

Hi,

I’m hoping someone will be able to help me with what I’m trying to do. I have a large database of schools. I’m trying to get the user to be able to filter them by multiple categories using selection tags. They would be filtered by State; Public or Private Middle School; Public or Private High School; and Colleges that are Division I, Division II, Division III, NAIA, Community, or International.

When someone selects 1 state, then the schools from just that state should show up in the repeater. When they add a second state, schools in both states should show up in the repeater. So they are filtering for schools in both those states.

You can filter further by clicking on the Middle School tags, and when someone clicks on Private, then the Schools from State 1, and State 2 should filter out any school that is not a Private Middle School. If someone clicks on both Public and Private in the middle School group, then they want to see all middle schools, both public and private, in the states that were selected.

Same with high schools. If they select private high school, then those should be added to the repeater, But only in the states that were selected, and same with college. (if that makes sense)

So for example: I want to see all schools from IL and AL, that are public middle schools, private high schools, and division 1 and 2 colleges. If I click on the private middle school tag, then it should add private middle schools to the results, but they should still be filtered by the state(s) that was selected.

1010×754 75.3 KB

Is there a way to filter the repeater this way?

Here is a screenshot of the page layout for an idea. (the States are collapsed in a box in this screenshot)

I also Included a screen of the database/collection fields that I have. (I tried different ways from putting all the tags in 1 field, to separating them out into individual fields, I also have these in text fields because I was trying different way to organize the collection to make this filtering work)

1140×882 85.1 KB

I’ve tried a bunch of tutorials but they don’t give me the results I need. I also looked at these examples and posts but again, they don’t end up with the results I need.

https://www.wix. com/velo/forum/tips-tutorials-examples/multiple-selection-tags-filter-using-velo-by-wixlection-tags

Does anyone know how to accomplish this?

This is our Wordpress page for reference of what I’m trying to recreate in WIX, but with tags.
https://www.touchpros. com/touchwall/where-we-are/

The code I have got me close, but no cigar.

import wixData from 'wix-data';   

$w.onReady(function () {       

$w("#stateTags, #middleSchoolTags, #highSchoolTags, #collegeTags").onChange(() => {      

const stateTag = $w('#stateTags').value;  
const middleTag = $w('#middleSchoolTags').value;  
const highTag = $w('#highSchoolTags').value;  
const collegeTag = $w('#collegeTags').value;      
let filter = wixData.filter();  

if (stateTag.length > 0 || middleTag.length > 0 || highTag.length > 0 || collegeTag.length > 0) {

            filter = filter.hasSome("stateTags", stateTag)
                .and(filter = filter.hasAll("middleSchoolType", middleTag))
                .and(filter = filter.hasAll("highSchoolType", highTag))
                .and(filter = filter.hasSome("collegeDivision", collegeTag))
}
         

$w('#dataset1').setFilter(filter);       

    }) 
});