Добавление сообщения об ошибке в фильтр поиска Isotope.JS?

Question

Я пытаюсь добавить сообщение, которое я могу отобразить, если кто-то ищет пустой. Что-то вроде строк «Здесь, похоже, ничего нет».

Я использую Isotope.JS для обработки своей фильтрации и пытаюсь использовать оператор JS If/Else на основе длины для отображения этого сообщения об ошибке. Кажется, я не могу заставить его работать, потому что консоль говорит, что объекты отображаются постоянно, даже если их не ищут.

функция

My 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

Хорошо, поэтому я наткнулся на свой ответ. В принципе, мне нужно было иметь мое if/else в конце моей функции поиска keyup или . Это то, что он выглядит следующим образом:

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

    })); 

Тогда я сменил свой HTML, чтобы сделать id быть проще в управлении, так что я использовал это для div моих результатов не.

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

А вот мой final result.