同位素将过滤器和搜索字段与逻辑相结合

Question

我在 codepen 上有一个代码，可用于过滤同位素网格，也可用于在同位素网格中进行搜索。

过滤器由复选框和逻辑组成，因此某些复选框无法同时激活 (male/female)。不过，这并不重要……

过滤器正在运行。搜索字段有效（不幸的是，只有当我首先没有激活过滤器时）

第一个愿望：我想将过滤器和搜索与 AND 逻辑结合起来。例如，当我在搜索框中插入 'martin' 时，搜索结果为 'gruber martin'、'hofer martin'、'maier martina'。还行吧。然后当我也激活 'female' 时，我会只剩下 'maier martina' (search=martin AND filter=female)

但我的代码在这种情况下不记得只设置过滤器的搜索:-(

第二个愿望：搜索字段应始终有效，而不仅仅是在没有过滤器处于活动状态时。

如果有人能帮助我就太好了。

谢谢..

HTML:

<button id="shuffle">shuffle</button>
<div class="button-group filter-button-group">
  <div class="btn">
    <input name="male" value=".male" id="male" type="checkbox">
    <label for="male">male</label>
  </div>
  <div class="btn">
    <input name="female" value=".female" id="female" type="checkbox">
    <label for="female">female</label>
  </div>
  <div class="btn">
    <input name="de" value=".de" id="de" type="checkbox">
    <label for="de">de</label>
  </div>
  <div class="btn">
    <input name="it" value=".it" id="it" type="checkbox">
    <label for="it">it</label>
  </div>
  <div class="btn">
    <input name="en" value=".en" id="en" type="checkbox">
    <label for="en">en</label>
  </div>
  <div class="btn">
    <input name="has-website" value=".has-website" id="has-website" type="checkbox">
    <label for="has-website">has-website</label>
  </div>
</div>
<input class="quicksearch" placeholder="Search" type="text">
<div class="blog_wrapper isotope_wrapper myclass">
  <div class="posts_group lm_wrapper masonry tiles col-6 isotope" style="position: relative; height: 10615.1px;">
    <div class="post-item isotope-item  de it male has-website" style="position: absolute; left: 0px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">gruber martin</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip">Lorem ipsum […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item  de it female" style="position: absolute; left: 179px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">maier erna</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip">dolor sit […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item  de it male" style="position: absolute; left: 359px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">hofer martin</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip">No text […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item  de it male" style="position: absolute; left: 539px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">zwerger josef</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip">Hello […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item  it female" style="position: absolute; left: 719px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">gruber susi</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip">bla bla […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item  en female" style="position: absolute; left: 899px; top: 0px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">maier martina</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip"> […]</span></div>
        </div>
      </div>
    </div>
    <div class="post-item isotope-item male" style="position: absolute; left: 0px; top: 10435px;">
      <div class="post-photo-wrapper scale-with-grid"> </div>
      <div class="post-desc-wrapper">
        <div class="post-desc">
          <div class="post-head"></div>
          <div class="post-title">
            <h2 class="entry-title" itemprop="headline"><a href="#">maxi john</a></h2>
          </div>
          <div class="post-excerpt"><span class="excerpt-hellip"> […]</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript:

    $('#male').click(function () {
        $('#female').prop('checked', false);
    });
    $('#female').click(function () {
        $('#male').prop('checked', false);
    });


  var grid=$('.isotope');
  var filter=$('.filter-button-group input');
  var qsRegex;


  grid.isotope({
    itemSelector: '.isotope-item',
      filter: function() {
          var searchResult = qsRegex ? $(this).text().match( qsRegex ) : true;
          return searchResult;
    }
  });



  // 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;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        }
        function delayed() {
          fn();
          timeout = null;
        }
        timeout = setTimeout( delayed, threshold || 100 );
      }
    }

  $('#shuffle').click(function(){
    grid.isotope('shuffle');
  });


  filter.change(function(){
    var filters = [];
    filter.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // filters = filters.join(', ');    OR
      filters = filters.join('');       //AND
    grid.isotope({ filter: filters });
  });

请看：code on codepen

Answer 1

我找到了解决方案：

    $('#male').click(function () {
        $('#female').prop('checked', false);
    });
    $('#female').click(function () {
        $('#male').prop('checked', false);
    });


  var grid=$('.isotope');
  var filter=$('.filter-button-group input');
  var suche=$('.quicksearch');
  var qsRegex;
  var buttonFilter;

  grid.isotope({
    itemSelector: '.isotope-item',
      filter: function() {
         // console.log(searchResult);
          var searchResult = qsRegex ? $(this).text().match( qsRegex ) : true;
          var buttonResult = buttonFilter ? $(this).is( buttonFilter ) : true;

          return searchResult && buttonResult;
    }
  });



  // use value of search field to filter
  var quicksearch = suche.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;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        }
        function delayed() {
          fn();
          timeout = null;
        }
        timeout = setTimeout( delayed, threshold || 100 );
      };
    }

  $('#shuffle').click(function(){
    grid.isotope('shuffle');
  });



  filter.change(function(){
    var filters = [];

    filter.filter(':checked').each(function(){
      filters.push( this.value );
    });
     //filters = filters.join(', ');    //OR
    filters = filters.join('');         //AND
    buttonFilter = filters;
    grid.isotope();
  });

See full example on codepen

Answer 2

与上面相同的示例，但来自 de docs :) https://codepen.io/desandro/pen/mCdbD

// quick search regex
var qsRegex;
var buttonFilter;

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

$('#filters').on( 'click', 'button', function() {
  buttonFilter = $( this ).attr('data-filter');
  $grid.isotope();
});

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


  // change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});


// 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 );
  };
}

同位素将过滤器和搜索字段与逻辑相结合

Isotope combine filter and search field with and logic

javascript

grid

jquery

jquery-isotope

masonry