isotope - 'no results' message? [closed]

Question

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."

Ranunculus

Answer 1

$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.

Anecdotal

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 ) { – Unreeve

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; }); – Refraction

This worked for me: var elems = $grid.isotope('getFilteredItemElements'); if ( !elems.length ) { $('.project__filter--msg').show(); } else { $('.project__filter--msg').hide(); } – Jenijenica