Hinzufügen einer 'Fehler' Nachricht zu einem Isotope.JS Suchfilter?

Question

Ich versuche, eine Nachricht hinzuzufügen, die ich anzeigen kann, wenn die Suche von jemandem leer ist. Etwas in der Art von "Hier scheint nichts zu sein."

Ich benutze Isotope.JS, um meine Filterung zu behandeln, und versuchte, eine JS If/Else-Anweisung basierend auf Länge zu verwenden, um diese Fehlermeldung anzuzeigen. Ich kann es anscheinend nicht zum Laufen bringen, weil die Konsole sagt, dass [0] Objekte ständig angezeigt werden, auch wenn sie nicht durchsucht werden.

Mein JS-Funktion für die Fehlermeldung

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'); 
    } 

Die Klassen hinzugefügt werden und entfernt

.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; 
} 

Und meinen div versteckt werden/angezeigt

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

Sie können eine sehen Beispiel hierfür codepen. Es scheint nicht meine Klasse anzuhängen, weil es die Länge meiner Beispiele in examples-container nicht erhalten kann.

Answer 1

In Ordnung, also bin ich auf meine Antwort gestoßen. Grundsätzlich musste ich meine if/else am Ende meiner keyup oder Suchfunktion haben. Dies ist, wie es aussieht:

// 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(); 
} 

    })); 

Dann habe ich meine HTML getauscht, um ein id zu machen leichter zu verwalten, so habe ich das für meine div ‚keine Ergebnisse‘.

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

Und hier ist mein final result.