title: Isotope: Create warning if search and filter doesn't give back any result
body: <p>I have written an extension for TYPO3. Now i have a problem. Can anyone tell me what i have to do if i want to display a custom warning text-message as soon as the searchstring or dropdown-filter doesn't give back any results? Something like: </p>
  
  <p>"Sorry - we can't find any entries with this search filters!"</p>
  
  <p>Currently my code is looking like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    // Isotope Steinlexikon
      $(function() {
          var $container = $('#lexikon-masonry'),
              $select = $('#lexikon-filter select'),
              filters = {};
  
  
          var qsRegex;
          var SelectFilter = '*';
  
          $container.isotope({
              itemSelector: '.item',
              // Filter mit Suchfeld
              filter: function() {
                  var $this = $(this);
                  var SerRes = qsRegex ? $(this).text().match( qsRegex ) : true;
                  var SelRes = $(this).is(SelectFilter);
                  return SerRes &amp;&amp; SelRes;
              }
          });
          // use value of search field to filter
          var $quicksearch = $('#quicksearch').keyup( debounce( function() {
              qsRegex = new RegExp( $quicksearch.val(), 'gi' );
              $container.isotope();
          }, 200 ) );
          // debounce so filtering doesn't happen every millisecond
          function debounce( fn, threshold ) {
              var timeout;
              return function debounced() {
                  if ( timeout ) {
                      clearTimeout( timeout );
                  }
                  function delayed() {
                      fn();
                      timeout = null;
                  }
                  timeout = setTimeout( delayed, threshold || 100 );
              }
          }
  
          //fancybox
          $('.fancybox2').on('click', function(e){
              e.preventDefault(); // Default action ausschalten
  
              $.fancybox({
                  //width: 500,
                  //height: 400,
                  autoSize: true,
                  href: $(this).attr('href'),
                  type: 'ajax'
              });
          });
  
  
          // Filter mit Select Form
  
          $select.change(function() {
  
              var $this = $(this);
  
              // store filter value in object
              // i.e. filters.color = 'red'
              var group = $this.attr('data-filter-group');
  
              filters[ group ] = $this.find(':selected').attr('data-filter-value');
              // console.log( $this.find(':selected') )
              // convert object into array
              var isoFilters = [];
              for ( var prop in filters ) {
                  isoFilters.push( filters[ prop ] )
              }
              console.log(filters);
              SelectFilter = isoFilters.join('');
              $container.isotope();
              return false;
  
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#lexikon-masonry .item {
   margin: 5px;
   padding: 5px;
   background: #fff;
   border: 1px #ccc solid;
      float: left;
   -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
   -webkit-box-shadow:  0px 6px 6px 0px rgba(0,0,0,0.2);
   box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
  }
  #lexikon-masonry .item img {
   opacity: 1;
  }
  #lexikon-masonry .item:hover img {
   opacity: 0.5;
  }
  #lexikon-masonry .image-hover #image-caption {
   position: relative; 
   width: 100%;
   text-align: center;
   bottom: 0px;
   background: #fff;
   z-index: 1;
   opacity: 1;
   text-transform: uppercase;
  
  }
  #lexikon-masonry .image-hover:hover #image-caption {
   opacity: 0.8;
  }
  #lexikon-masonry .image-hover #image-caption span {
   text-transform: none;
  }
  #lexikon-masonry .image-hover .img-button-link {
   position: absolute; 
   /*left: 50%;
   top: 50%;*/
   margin-left: 110px;
   margin-top: -125px;
   opacity: 0;
  }
  #lexikon-masonry .image-hover:hover .img-button-link {
   opacity: 1;
  }
  
  div#lexikon-filter {
      position:left;
  }
  
  div.lexStyled { 
      float: left;
      margin-right: 20px;
      overflow:hidden; /* this hides the select's drop button */ 
      padding:0; 
      margin:0; 
      background: white url(../images/select-down.png) no-repeat bottom right; 
      /* this is the new drop button, in image form */ 
      width:12em; 
   border-radius:2px; 
      box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
      border: solid 1px #ccc; 
  }
  
  div.lexStyled select { 
      width:115% /* this percentage effectively extends the drop down button out of view */; 
      background-color:transparent /* this hides the select's background making any styling visible from the div */; 
      background-image:none; 
      -webkit-appearance: none /* this is required for Webkit browsers */; 
      border:none; 
      box-shadow:none; 
      padding:0.3em 0.5em; /* padding should be added to the select, not the div */ 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"&gt;&lt;/script&gt;
   &lt;div class="row"&gt;
    &lt;div id="lexikon-suche" class="col span_3"&gt;
     &lt;input class="form-control" type="text" data-filter-value="" id="quicksearch" placeholder="Durchsuchen" /&gt;
    &lt;/div&gt;
    &lt;div id="lexikon-filter" class="col span_9"&gt;
     &lt;div class="lexStyled"&gt;
     &lt;select data-filter-group="gestein"&gt;
      &lt;option data-filter-value="*" class="selected"&gt;Alle Gesteine&lt;/option&gt;
                  &lt;option data-filter-value=".lagersteine" class="selected"&gt;Lagersteine&lt;/option&gt;
                  &lt;option data-filter-value=".kunststeine" class="selected"&gt;Kunststeine&lt;/option&gt;
  
     &lt;/select&gt;
     &lt;/div&gt;
     &lt;div class="lexStyled"&gt;
     &lt;select data-filter-group="farbe"&gt;
      &lt;option data-filter-value="*" class="selected"&gt;Alle Farben&lt;/option&gt;
                  &lt;option data-filter-value=".rot" class="selected"&gt;Rot&lt;/option&gt;
                  &lt;option data-filter-value=".gelb" class="selected"&gt;Gelb&lt;/option&gt;
  
     &lt;/select&gt;
     &lt;/div&gt;
  
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;br&gt;&lt;hr&gt;&lt;br&gt;
   &lt;div class="row"&gt;
    &lt;div id="lexikon-masonry" class="col span_12"&gt;
      &lt;div class="item image-hover lagersteine rot gelb"&gt;
       &lt;div id="image-caption" class="name"&gt;Test1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item image-hover kunststeine rot"&gt;
       &lt;div id="image-caption" class="name"&gt;Test2&lt;/div&gt;
      &lt;/div&gt;
              &lt;div class="item image-hover lagersteine kunststeine gelb"&gt;
                  &lt;div id="image-caption" class="name"&gt;Test3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I did not come through the examples given in these answers (<a href="https://stackoverflow.com/questions/14596312/jquery-isotope-filter-to-no-items">jQuery Isotope filter to no items?</a>). It does not work for me.</p>
  
  <p>Thx for your help</p>