isotope 3, message when no results?

[unijez]

Is there any way or documentation for showing some content when there are no results.

I've tried the following but i think its from isotope 2 code and doesn't work?

	var $grid = $('.filter-grid').isotope({
			itemSelector: '.filter-grid__container',
		percentPosition: true,
		horizontalOrder: true,
		masonry: {
			columnWidth: '.filter-grid-sizer'
		}
		});

		$grid.isotope({ filter: '.filter-grid' });

		if ( !$grid.data('isotope').$filteredAtoms.length ) {
		  $('.project__filter--msg').fadeIn('slow');
		} else {
		  $('.project__filter--msg').fadeOut('fast');
		}

Thank you for any help.

[hunter b rose]

@unijez — I've run into this as well, and I typically just write a small bit of custom code myself to cover it, since it's not too difficult.

I'll usually just have a small div, something like this—

<p class="isotope__no-results" id="isotope__no-results">
    The current filter selection resulted in no matches... (or whatever)
</p>

And then in the JS I'll add an event listener on layout complete (reference)—

isoptope.on('layoutComplete', function(items) {
    document.getElementById('isotope__no-results').style.display = items?.length ? 'block' : 'none'
})

The listener passes items as an argument, which is the active set of filtered items currently in the Isotope instance. So basically I just check to see if there are more or less than 1 elements in the current filters: if not, I display the no results HTML, and if there is, I hide it again. You can do this a lot of different ways too, so whatever works for you.

Let me know if you have any other questions!