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

它似乎没有为此目的专门内置的东西，但是因为filter函数似乎允许jQuery支持的任何类型的选择器，所以你可以使用{{3选择器。

E.g。

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

Answer 2

在阅读同位素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 );
}
}

jQuery Isotope Searchable Gallery

2 个答案: