向Isotope.JS搜索过滤器添加“错误”消息？

Question

I am trying to add a message I can display if someone's search comes up empty. Something along the lines of "There doesn't seem to be anything here."

I'm using Isotope.JS to handle my filtering, and was trying to use a JS If/Else statement based on length to display this error message. I can't seem to get it to work because the console says there are [0] objects being displayed all the time, even when not being searched.

My JS function for the error message

var exampleCount = $('.examples-container .example').length;    
    //shows empty state text when no jobs found
    if(exampleCount == '0') {
      $('.examples-container').addClass('empty');
    }
    else {
      $('.examples-container').removeClass('empty');
    }

The classes being added and removed

.empty-item {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 0s;
  transition-timing-function: ease;
  display:none;
}

.empty .empty-item {
  transition-property: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
  transition-timing-function: ease;
   display:block !important;
}

And my div to be hidden/displayed

<span class="empty-item">no results</span>  

You can see an example at this codepen . It seems to not want to append my class because it can't get the length of my examples in examples-container .

Answer 1

Alright, so I came across my answer. Basically, I needed to have my if/else at the end of my keyup or search function . This is what it looks like:

// use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope();

// display message box if no filtered items
if ( !$container.data('isotope').filteredItems.length ) {
  $('#noResult').show();
} else {
  $('#noResult').hide();
}

  }) );

Then I swapped my HTML to make an id to be easier to manage, so I used this for my 'no results' div .

<div id="noResult">
   <div>No results</div>
</div>

And here is my final result .