New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combination filtering checkbox's and dropdowns #771

Closed
HarryFrancis opened this Issue Jul 30, 2014 · 8 comments

Comments

4 participants
@HarryFrancis
Copy link

HarryFrancis commented Jul 30, 2014

Hey there, I am trying to create an isotope gallery that can be filtered with 2 drop downs and multiple category checkboxes.

I currently have it all working apart from when I select a new filter it just overrides the old one rather than combining them.

Any help would be hugely appreciated, thanks!

I have made a codepen so you can see what I'm trying to achieve. (It's my first codepen sorry if it's messy!)

http://codepen.io/HarryFrancis/pen/iowHz

Thanks alot,
Harry.

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Jul 31, 2014

Here's one way to do it. I made an example just for you! http://codepen.io/desandro/pen/draxo

// filter with selects and checkboxes
var $inputs = $('#form-ui select, #form-ui input').change( function() {
  // map input values to an array
  var values = [];
  $inputs.each( function( i, elem ) {
    var value;
    if ( elem.type === 'checkbox' ) {
      // if checkbox, use value if checked
      value = elem.checked && elem.value;
    } else {
      // or use select's value
      value = elem.value;
    }
    if ( value ) {
      values.push( value )
    }
  });

  var filterValue = values.join(', ');
  $container.isotope({ filter: filterValue })
});

This works by building all the filters every time there's a change to the inputs.


In this example, the filters are inclusive. You can select red AND blue AND large. If your goal is to combine some of these filters to be exclusive, that will that a bit more code.

@HarryFrancis

This comment has been minimized.

Copy link
Author

HarryFrancis commented Jul 31, 2014

That's amazing! Thankyou so much for your time and effort to help me!

The way I'm hoping to get them filtering is a bit confusing, I'll try and explain as best I can.

The drop downs I want to work so that when selected they;

  • Reset the tickboxes to 'all'
  • Only display items with both the selected categories

For example if they selected the $10 dropdown and the small drop down it would only show items with the category of $10 and small rather than how they are working now, with $10 or all.

With the tickboxes, I'm trying to get it so they just filter what the dropdowns have selected. So, for example, when all the small, and $10 categories are shown, you can then filter through the colors of these with the checkboxes.

Thank You again for all your help, its amazing!

Harry.

@HarryFrancis

This comment has been minimized.

Copy link
Author

HarryFrancis commented Jul 31, 2014

So I was trying things out and think I might have figured out a way to get it working.

Here is what we're currently using (Thanks to you!)

var $container = $('.tiles--resources').isotope({
  itemSelector: '.tiles__item'
});

var $output = $('#output');

// filter with selects and checkboxes
var $inputs = $('#filters select, #filters input').change( function() {
  // map input values to an array
  var values = [];
  $inputs.each( function( i, elem ) {
    var value;
    if ( elem.type === 'checkbox' ) {
      // if checkbox, use value if checked
      value = elem.checked && elem.value;
    } else {
      // or use select's value
      value = elem.value;
    }
    if ( value ) {
      values.push( value );
    }
  });

  var filterValue = values.join(', ');
  $output.text( filterValue );
  $container.isotope({ filter: filterValue });
});

On this line -
var filterValue = values.join(', ');
I changed it to this -
var filterValue = values.join('');

Doing so made it so it would only display categories matching all selected rather than displaying any that matched at least one category.

This kind of works, apart from I'm trying to make the tickboxes work how they did originally but doing this means it will only display items with all the matching categories.

My thought's were to try and output the dropdown filters with
var filterValue = values.join('');

and with the Checkboxes, use this
var filterValue = values.join(', ');

I'm pretty bad with javascript though so i'm not sure if this would work/how to do it as I would have to set 2 different variables then output something like this I'm guessing
var filterValue = valuesDropdown.join('');+valuesCheckbox.join(', ');

This is just guessing but would be good to know if this helps answer my original question!

Thanks alot, Harry.

@HarryFrancis

This comment has been minimized.

Copy link
Author

HarryFrancis commented Jul 31, 2014

Here's what I have gotten so far - http://codepen.io/HarryFrancis/pen/iowHz

It's nearly working just a few weird bugs, I think the javascript I added to what you gave me might be a bit dodgy but I have tried what I thought would work, would be good to hear how/what you think I could do to make it better!

Thanks, Harry.

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Aug 3, 2014

Sure thing. See http://codepen.io/desandro/pen/GFbAs This example has two kinds of filters: exclusive and inclusive.

  • Inclusive filters are like using OR. Color is inclusive. Selecting red and blue should filter red OR blue, .red, .blue.
  • Exclusive filters are like using AND. Size and price are exclusive. Selecting small and price should filter small AND price10, .small.price10.
  • Selecting red and blue and small and price should filter ( red AND small AND price10 ) OR ( blue AND small AND price10 ), .red.price10.small, .blue.price10.small.

This is the relevant code that puts it all together.

// filter with selects and checkboxes
var $selects = $('#form-ui select');
var $checkboxes = $('#form-ui input');

$selects.add( $checkboxes ).change( function() {
  // map input values to an array
  var exclusives = [];
  var inclusives = [];
  // exclusive filters from selects
  $selects.each( function( i, elem ) {
    if ( elem.value ) {
      exclusives.push( elem.value );
    }
  });
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // if checkbox, use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });

  // combine exclusive and inclusive filters

  // first combine exclusives
  exclusives = exclusives.join('');

  var filterValue;
  if ( inclusives.length ) {
    // map inclusives with exclusives for
    filterValue = $.map( inclusives, function( value ) {
      return value + exclusives;
    });
    filterValue = filterValue.join(', ');
  } else {
    filterValue = exclusives;
  }

  $output.text( filterValue );
  $container.isotope({ filter: filterValue })
});

To reset the checkboxes to all, I think a button is a more appropriate UI. I've added a separate example for that http://codepen.io/desandro/pen/iBkzF

@HarryFrancis

This comment has been minimized.

Copy link
Author

HarryFrancis commented Aug 4, 2014

Amazing, thankyou very much, you have been a massive help!

Sorry for all the messages just want to keep it documented incase anyone else had the same issue!

Harry.

@manoj382

This comment has been minimized.

Copy link

manoj382 commented Aug 24, 2014

@desandro, you're a champ. Thanks for posting these examples.

@rostik

This comment has been minimized.

Copy link

rostik commented Feb 2, 2016

Is there a way to add to this functionality, so just like there are 2 different groups of select items, have 2 different groups of check boxes ?

@metafizzy metafizzy locked and limited conversation to collaborators Feb 2, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.