添加错误'发送给Isotope.JS搜索过滤器的消息?

时间:2016-04-05 18:35:37

标签: javascript jquery css jquery-isotope

我正在尝试添加一条消息,如果某人的搜索结果为空,我可以显示该消息。在某些方面"在这里似乎没有任何东西。"

我使用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中获得我的示例的长度。

1 个答案:

答案 0 :(得分: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更容易管理,因此我将此用于我的“没有结果”#39; div

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

这是我的 final result