Bir Isotope.JS Arama filtresine 'hata' iletisi ekleniyor mu?

Question

Birisi arama bittiğinde görüntüleyebileceğim bir ileti eklemeye çalışıyorum. "Burada hiçbir şey yok gibi görünüyor" satırlarında bir şey.

Filtrelerimi işlemek için Isotope.JS kullanıyorum ve bu hata iletisini görüntülemek için uzunluğa dayalı bir JS If/Else deyimi kullanmaya çalışıyordum. Bunu işe almak için görünmüyor çünkü konsol, arama yapılmadığında bile, her zaman görüntülenen [0] nesnenin olduğunu söylüyor. hata iletisi için

Benim JS işlevi

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

sınıflar eklenmiş ve

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

Ve div kaldırıldı gizlenmesine/Bir görebilirsiniz

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

görüntülendiğini örnekte bu codepen. Sınıfıma eklemek istemediğimden, examples-container numaralı telefondaki örneklerimin uzunluğunu alamıyor.

Answer 1

Tamam, cevabımla karşılaştım. Temel olarak, keyup veya arama işlevinin arama işlevinin sonunda if/else değerine sahip olmalıydım. Bu gibi görünüyor budur:

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

    })); 

Sonra yönetmek daha kolay olması için bir id yapmak HTML'imi takas, bu yüzden 'hayır sonuçlarında' div için kullandı.

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

Ve işte benim final result olduğunu.