Question

我喜欢使用Isotope来过滤搜索字段，例如此处 https://codepen.io/desandro/pen/wfaGu只是我想对元素进行分组/分类，并添加一个（父）标题（如果需要，还可以添加描述），该标题应在通过搜索找到某个元素时显示，并且在该类别中没有元素时隐藏搜索结果。

所以我的HTML看起来像这样：

<input type="text" class="quicksearch" placeholder="Search" />

<h2 class="headline categoryA">Category A</h2>
<div class="grid">
<div class="element-item categoryA" data-category="categoryA">Item 1</div>
<div class="element-item categoryA" data-category="categoryA">Item 2</div>
</div>

<h2 class="headline categoryB">Category B</h2>
<div class="grid">
<div class="element-item categoryB" data-category="categoryB">Item 1</div>
<div class="element-item categoryB" data-category="categoryB">Item 2</div>
</div>

我没有将所有内容放到一个网格div元素中，而是为每个类别使用了一个单独的元素，因此类别项本身位于一行上。

如果我将h2标头移到网格div中，它会被element-item div推到后面，但不再单独排成一行。

到目前为止，JavaScript部分看起来是这样的（即，由于我不了解Java，所以我没有修改Codepen代码）：

// quick search regex
var qsRegex;

// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
  fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}

现在，当我搜索项目时，标题也会显示所有类别的结果，即没有搜索结果，即我将搜索结果放在h2类别标题的顶部和下方，如下所示：

A类

搜索结果1

类别B

类别C

D类

...

如果类别没有任何搜索结果，如何隐藏类别标题？我不能将标题添加为元素项，因为如果它们与搜索不匹配，尽管搜索结果中包含相同类别的项目，它们将被隐藏。

如果同位素无法做到这一点，请告诉我可以使用什么。谢谢！

使用搜索字段进行过滤：显示/隐藏标题

0 个答案: