title: Display when no results found on keyup event
body: <p>I have multiple classes called <code>post-content</code> on <code>div</code> and have a search box, who's event is fired on <code>keyup</code>. If there's no matching result, I'd like to display '<em>No results match</em>'</p>
  
  <pre><code>$('.post-content').each(function() {
    $(this).attr('data-search-term', $(this).text().toLowerCase());
  });
  $('#search-criteria').on('keyup', function() {
    var searchTerm = $(this).val().toLowerCase();
    $('.post-content').each(function() {
      if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length &gt; 0) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
  </code></pre>
  
  <p>I tried creating the element inside the else block, but it seems to fire everytime the key is pressed, thus printing the entire page with the event.</p>