javascript - jQuery 同位素可搜索图库

Question

我有一个同位素库，我想添加一个实时搜索功能，这意味着当一个人输入一个单词时，库将开始自动过滤。

1）同位素有可能吗？

2）如果是这样，我该怎么做？

注意：我已经在网上搜索并没有找到任何关于此的内容。

这是我画廊中的一件物品的样子：

<div class="element hybrid numbers-filter" data-category="hybrid">
  <p class="type">H</p>
  <h2 class="name">303</h2>
  <p class="strain-info">No Info Available</p>
  <p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p>
</div> 

Answer 1

在阅读有关 Isotope 2 的信息时，有一支具有此功能的Code Pen ！

这是在上面的链接关闭的情况下使其工作的代码：

注意：这不是我的代码，而是代码示例。

HTML

<input type="text" id="quicksearch" placeholder="Search" />
<div class="isotope">
  <!-- ISOTOPE CONTENT HERE -->
</div>

JS

$( function() {
// quick search regex
var qsRegex;

// init Isotope
var $container = $('.isotope').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' );
  $container.isotope();
}) );

});

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
  if ( timeout ) {
    clearTimeout( timeout );
  }
  function delayed() {
    fn();
    timeout = null;
  }
  setTimeout( delayed, threshold || 100 );
}
}

Answer 2

它似乎没有专门为此目的内置的东西，但是由于该filter函数似乎允许 jQuery 支持的任何类型的选择器，您可以使用:contains选择器围绕它构建一些东西。

例如

$('#container').isotope({ filter: ':contains("search text")' });