[not solved] - multiple choice dropdown checkbox filter to show all results when nothing is checked instead of none

Ask the community
,
1

I really need some help on this one.
On my website I have a repeater that is filtered by a few dropdown menus and tags.

One of the dropdown menus is a custom built multiple choice checkbox dropdown (built by this example - essentially a repeater containing a checkbox with options populated by a database).

The problem I am experiencing is that when nothing is selected, obviously the repeater shows no results when you click search (makes sense, since everything in my database has a value in that field (its a tag field in the database). However, I want to make it so that when nothing is selected, it shows all results. Furthermore, if nothing is selected from that multiple choice dropdown menu, but other filters are used - to still give results based on those filters. Obviously the issue im encountering is that by default, if nothing is selected it returns no items since there is nothing in my database without a value in that field. But I cannot wrap my head around how to do this as I am very new to Velo, javascript, etc.

Here’s a picture for example:

973×512 36.7 KB

Here’s the code that does the search when you click "show me my dream job:

//Main search button to apply all filters used to find a job
export function searchButton_click ( event ) {

search ();
$w ( “#fieldsContainer” ). collapse ();
}

function search () {

$w ( '#pagination1' ). hide ();

let selectedTags = $w ( “#benefits” ). value ;
let continents = ;
$w ( “#continents1” ). forEachItem (( $item , itemData , index ) => {
if ( $item ( ‘#optionCheckbox’ ). checked ) {

        continents . push ( $item ( "#optionText" ). text ); 
    } 
    
    
});

wixData . query ( “jobpostings” )
. hasSome ( ‘field’ , continents )
. and ( wixData . query ( “jobpostings” ). contains ( “location” , String ( $w ( “#locationDropdown” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “type” , String ( $w ( “#employment” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “language” , String ( $w ( “#languageDropdown” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “remote” , String ( $w ( “#checkboxGroup1” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “companyType” , String ( $w ( “#companySize” ). value )))
. and ( wixData . query ( “jobpostings” ). hasAll ( “benefits2” , selectedTags ))

// .and(wixData.query(“jobpostings”).contains(“partners”, String($w(“#approved”).value)))

. find ()

. then ( results => {

            if  ( results . items . length  >  0 ) {

// if there are results, hide the element and fill the repeater
$w ( ‘#noResults’ ). hide ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “Yes results” );
} else {
// if there are no results, hide the element (and fill the empty repeater?)
$w ( ‘#noResults’ ). show ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “No results” );
}
//$w(“#repeater4”).data = results.items;
});

}

As you can see, I also have a part of the code that shows a “no results” message in case there are no results.
So at the moment, if you don’t have anything selected in the multiple choice checkbox dropdown, it shows that message because it finds no results - and if you select other filters instead of that one, the same happens (since nothing checked from those boxes = empty value, and every item in my db has values so its not finding anything).

ALSO while we are here, how do i not limit filter repeater results to 50? At the moment, it only shows max 50 results when filtered (i have a large db with some results being 200+). I want it to display all results when filtered, not only 50.

Please help me resolve this!
Would appreciate it a lot.
Thank you!
-Dorijan

2

The problem is that you apply a filter that has 0 results, so before you start applying the current filter check if there is anything selected in the multiple choice filter, if yes then do what you do now and let him filter by those selections.
If not then just reset the filter or apply default values that suit your needs, so you get everything you want available as a result for the first filtering, best to just write a second search function for that occurrence.
Something like this would then replace the search() in your searchButton_click event:

if($w("#locationDropdown").value != null){search();}
else{emptysearch();}

Since you now get results from the first filter you can filter them further with the second filter.
The problem with the second filter is probably just that your main filter already delivers 0 results and it does not matter how much further you filter a 0 result since it can’t go down further.

For the question about the limit of shown things you probably have set a limit of how much he shows on your dataset in the Editor, you should increase it either on the page or by Code, you can check the functions in the API Docs.
Should be PageSize I guess, haven’t used that one yet personally so not sure.
setPageSize - Velo API Reference - Wix.com

3

Thank you for your input! So I definitely see what you mean, but I’m still having trouble as the item that I’m having problems with is the dropdown referred to as “continents” through code, which contains #optionsCheckbox.

let continents =;
$w ( “#continents1” ). forEachItem (( $item , itemData , index )=> { if ( $item ( ‘#optionCheckbox’ ). checked ) { continents . push ( $item ( “#optionText” ). text );
}

Because essentially, this dropdown that is giving me 0 results is a collapsed repeater, populated through code from a databse. Basically a code reads a “job field” database and fills up the repeater with choices for it.

I love the idea of 2 different functions in case the chechboxes are checked, or unchecked, definitely would solve the issue, however I can’t get it to work. Before calling the 2 functions “search” and “empty search”, i modified the “export searchButton_click” based on your input and now it looks like this:

export function searchButton_click ( event ) {
if ( $w ( “#optionCheckbox” ). value != null ){ search ();}
else { emptysearch ();}

$w ( “#fieldsContainer” ). collapse ();
}

Then I copied and pasted the first original search function, called it “emptysearch” and removed the following line from it:
wixData . query ( “jobpostings” ). hasSome ( ‘field’ , continents )
(since this is the line of code that i am trying to ignore if the boxes are unchecked so it continues to filter down)

And basically now the whole function looks like this, but it still returns 0 and gives me the “no results found” message even if nothing is selected. I think it can’t recognize the value of the checkbox being 0 since it’s populated through a database and code. Here’s my overall code now:

export function searchButton_click ( event ) {
if ( $w ( “#optionCheckbox” ). value != null ){ search ();}
else { emptysearch ();}

$w ( “#fieldsContainer” ). collapse ();
}

function search () {

$w ( '#pagination1' ). hide ();

let selectedTags = $w ( “#benefits” ). value ;
let continents = ;
$w ( “#continents1” ). forEachItem (( $item , itemData , index ) => {
if ( $item ( ‘#optionCheckbox’ ). checked ) {

        continents . push ( $item ( "#optionText" ). text ); 
    } 
    
    
});

wixData . query ( “jobpostings” )
. hasSome ( ‘field’ , continents )
. and ( wixData . query ( “jobpostings” ). contains ( “location” , String ( $w ( “#locationDropdown” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “type” , String ( $w ( “#employment” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “language” , String ( $w ( “#languageDropdown” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “remote” , String ( $w ( “#checkboxGroup1” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “companyType” , String ( $w ( “#companySize” ). value )))
. and ( wixData . query ( “jobpostings” ). hasAll ( “benefits2” , selectedTags ))

// .and(wixData.query(“jobpostings”).contains(“partners”, String($w(“#approved”).value)))

. find ()

. then ( results => {

            **if**  ( results . items . length  >  0 ) {

// if there are results, hide the element and fill the repeater
$w ( ‘#noResults’ ). hide ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “Yes results” );
} else {
// if there are no results, hide the element (and fill the empty repeater?)
$w ( ‘#noResults’ ). show ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “No results” );
}
//$w(“#repeater4”).data = results.items;
});

}

function emptysearch () {

$w ( '#pagination1' ). hide ();

let selectedTags = $w ( “#benefits” ). value ;
let continents = ;
$w ( “#continents1” ). forEachItem (( $item , itemData , index ) => {
if ( $item ( ‘#optionCheckbox’ ). checked ) {

        continents . push ( $item ( "#optionText" ). text ); 
    } 
    
    
});

wixData . query ( “jobpostings” ). contains ( “location” , String ( $w ( “#locationDropdown” ). value ))
. and ( wixData . query ( “jobpostings” ). contains ( “type” , String ( $w ( “#employment” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “language” , String ( $w ( “#languageDropdown” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “remote” , String ( $w ( “#checkboxGroup1” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “companyType” , String ( $w ( “#companySize” ). value )))
. and ( wixData . query ( “jobpostings” ). hasAll ( “benefits2” , selectedTags ))

// .and(wixData.query(“jobpostings”).contains(“partners”, String($w(“#approved”).value)))

. find ()

. then ( results => {

            **if**  ( results . items . length  >  0 ) {

// if there are results, hide the element and fill the repeater
$w ( ‘#noResults’ ). hide ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “Yes results” );
} else {
// if there are no results, hide the element (and fill the empty repeater?)
$w ( ‘#noResults’ ). show ();
$w ( “#repeater4” ). data = results . items ;
console . log ( “No results” );
}
//$w(“#repeater4”).data = results.items;
});

}

As you can see, I’ve just added your code to the export searchButton_click and copy pasted the search function, renamed it to emptysearch and removed the checkbox line of code - but it still gives me 0 results. I’m getting close tho!

4

Just to clear out since I’m tired and can’t clearly think atm (but really need to finish this):
Multiplechoice checkbox dropdown repeater = #continents1
Checkbox element in that repeater = #optionsCheckbox
In the editor it looks like this:

After being populated by code it looks like this:

973×512 36.7 KB

Problem: I am trying to program this in a way where if nothing is selected from the checkbox dropdown menu - clicking “find my dream job” performs another function that ignores the checkbox filtering option so that any results can be found. Because so far - not picking anything from this checkbox dropdown leads to 0 results since all items in my database have values. (relevant code above)

5

Problems with working on different types of filter?
Take a look here…

https://www.media-junkie.com/pflegeservice

Read the already given posts → you will surely find your wished solution.