将 'error' 消息添加到 Isotope.JS 搜索过滤器？

Question

我正在尝试添加一条消息，如果有人的搜索结果为空，我可以显示该消息。类似于 "There doesn't seem to be anything here."

我正在使用 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');
    }

正在添加和删除 class 项

.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 是 hidden/displayed

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

您可以在此处查看示例 codepen。它似乎不想附加我的 class 因为它无法获得我在 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();
}

  }) );

然后我交换了我的 HTML 使 id 更易于管理，所以我将它用于我的 'no results' div.

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

这是我的final result。

将 'error' 消息添加到 Isotope.JS 搜索过滤器？

Adding an 'error' message to an Isotope.JS Search filter?

javascript

jquery

css

jquery-isotope