How to add a multi-checkbox Search data filter

Ask the community
,
1

Hi All,

Thought to share a solution to how to add a Search filter that is based on a user checking more than one checkbox (and based on that returning a filtered Dataset):

972×510 71.2 KB

A SOLUTION

1. Add a “Search” field to the Collection you’d like to filter. (The next point will cover how to add values for each row)

2. Add an “OnAfterSave” event handler to the page where you have your form elements databound to your dataset (example: the Form where you collect information or input information pertaining to the information to be searched):

853×909 36.9 KB

import wixData from 'wix-data';

$w.onReady(function () {
 // register event
  $w("#dataset1").onAfterSave( (itemBeforeSave, itemAfterSave) => {
    console.log("After save - start");
 let search = "";

 if(itemAfterSave.qualitativeResearch) { search += "qualitativeResearch,"; }
 if(itemAfterSave.quantitativeResearch) {  search += "quantitativeResearch,"; }
 if(itemAfterSave.userExperience) {  search += "userExperience,"; }
 if(itemAfterSave.designResearch) {  search += "designResearch,"; }
 if(itemAfterSave.neuroscience) {  search += "neuroscience,"; }
 if(itemAfterSave.strategicPlanner) {  search += "strategicPlanner,"; }
 if(itemAfterSave.brandDevelopment) {  search += "brandDevelopment,"; }
 if(itemAfterSave.antropology) {  search += "antropology"; }
 
 // get row thru query method first. Then update. Doing it this way
 // ensures that won't lose any other data for the other fields. 
    wixData.query("YOUR-COLLECTION")
        .eq("_id", itemAfterSave._id)
        .find()
        .then( (results) => {
          let item = results.items[0];
          item.search = search; 
          wixData.update("YOUR-COLLECTION", item);
          console.log("After save - complete");
        } )
        .catch( (err) => {
          let errorMsg = err;
          console.log("After save - error");
        } );

  } );

});
  1. Add the filtering logic to the Search page’s code-behind. Note, the key parts to the code below are setting the search values to an empty-string if they were not checked and then note the section with multiple “.contains” clauses:

972×510 71.2 KB

export function search_click(event) {
  $w('#spinner').show();  
  $w('#notFound').hide();

 let textQualitativeResearch = $w('#chkQualitativeResearch').checked ? 'qualitativeResearch' : '' ;
 let textQuantitativeResearch = $w('#chkQuantitativeResearch').checked ? 'quantitativeResearch' : '' ;
 let textUserExperience = $w('#chkUserExperience').checked ? 'userExperience' : '' ;
 let textDesignResearch = $w('#chkDesignResearch').checked ? 'designResearch' : '' ;
 let textNeuroscience = $w('#chkNeuroscience').checked ? 'neuroscience' : '' ;
 let textStrategicPlanner = $w('#chkStrategicPlanner').checked ? 'strategicPlanner' : '' ;
 let textBrandDevelopment = $w('#chkBrandDevelopment').checked ? 'brandDevelopment' : '' ;
 let textAnthropology = $w('#chkAnthropology').checked ? 'antropology' : '' ;

  $w("#dynamicDataset").setFilter(wixData.filter()
    .contains("search", textQualitativeResearch)
    .contains("search", textQuantitativeResearch)
    .contains("search", textUserExperience)
    .contains("search", textDesignResearch)
    .contains("search", textNeuroscience)
    .contains("search", textStrategicPlanner)
    .contains("search", textBrandDevelopment)
    .contains("search", textAnthropology)
  )
  .then( (results) => {
    console.log("Specialists are now filtered.");
 if(!results){
        $w('#notFound').show();
    }
    $w('#spinner').hide();
  } )
  .catch( (err) => {
    console.log("Specialists filter error: " + err);
    $w('#spinner').hide();
  } );  
}

Hope this helps.

Nick

2 Likes
2

is #spinner the name of the repeater? how do you manage how the information is displayed after the data has been filtered?

3

Comlicated, but very interesting. I coded a checkboxfilter, but I use boolean fields.
But very interesting way to use checkboxes to search text in the db.

4

No, it isn’t.

 if(!results){
        $w('#notFound').show();
    }
    $w('#spinner').hide();
  } )

You can see 2 functions:
.show(); - shows an hidden element
.hide(); - hides a shown element.

This 2 elements are images or text fields.
#notFound - could be a textfield, that says “Sorry, your search has no results”
#spinner - could be an loading GIF, that is shown for some secounds if you press “search”

 $w("#dynamicDataset").setFilter(wixData.filter()

This function filters the shown entries in your repeater.
After this function you can only see the “filtered” entries on the repeater.