Isotope.JS検索フィルタに「エラー」メッセージを追加していますか？

Question

誰かの検索が空になった場合に表示できるメッセージを追加しようとしています。ここには何もないようです。

私はIsotope.JSを使用してフィルタリングを処理していますが、このエラーメッセージを表示するために長さに基づくJS If/Else文を使用しようとしていました。コンソールには、検索されていなくても、常に[0]のオブジェクトが表示されていると表示されているため、動作させることはできません。エラーメッセージの

私のJS機能は

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

クラスが追加され、

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

そして、私のdivを削除非表示にする/あなたが見ることができます

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

を表示されていますこの場合の例はcodepenです。 例の長さをexamples-containerにすることができないので、私のクラスを追加したくないようです。

Answer 1

申し訳ありませんが、私は答えを見つけました。基本的には、keyupまたはの検索機能の最後にif/elseを追加する必要がありました。これは、それがどのように見えるかです：

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

    })); 

それから私はidが管理しやすいようにするために私のHTMLを入れ替えたので、私は私の「ノー結果」divのためにこれを使用していました。

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

そして、ここで私のfinal resultです。