9

I'm using the Isotope JS plugin (v2.0.1) from Metafizzy to filter a library of publications, and I am using more than one filter (e.g. publisher and industry). Is there a way to check if my combination of filters has resulted in zero results, and then show a corresponding message... something like "Sorry. No matching items found."

mycotn
  • 13
  • 4
BellamyStudio
  • 771
  • 2
  • 9
  • 22

1 Answers1

15
$container.isotope({ filter: '.your-filter' });

  if ( !$container.data('isotope').$filteredAtoms.length ) {
    $('.message-div').fadeIn('slow');
  } else {
    $('.message-div').fadeOut('fast');
  }

You could also use hide/show or a number of other effects instead of fadeIn and fadeOut depending on your effect.

jayjo
  • 238
  • 4
  • 14
  • 1
    Thanks for sharing this, in the version of Isotope I am using (v2.1.1) I actually had to do it with `filterItems.length` so it was: `if ( !$('.izotope-container').data('isotope').filteredItems.length ) {` – Noitidart Sep 17 '15 at 18:44
  • You can also achieve the same using the 'arrangeCompleted' event. That event provides two parameters to the function: event and filteredItems. filteredItems will give you the number of items after applying the filter and finished all the animations. I think this is more accurate. `$grid.on( 'arrangeComplete', function( event, filteredItems ) { if( filteredItems.length > 0 ) // hide message else // show message; });` – Miguel Feb 03 '19 at 19:41
  • 2
    This worked for me: `var elems = $grid.isotope('getFilteredItemElements'); if ( !elems.length ) { $('.project__filter--msg').show(); } else { $('.project__filter--msg').hide(); }` – sk03 Feb 01 '21 at 16:04