CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
jawtt
jawtt

Reputation: 1

Isotope combination filters to return results from multi-select, single select, and free text

I'm trying to combine a couple filter types using the Isotope plugin: free text search, multi-select, single select (3 separate groups).

I'm not even close to being proficient in JS/jquery, which is why I have been relying on the following examples (both provided by david DeSandro I believe) to get my desired result.

Here is my codepen example: https://codepen.io/jawtt/pen/pPaxzR

$('#select').on( 'click', 'input', function() {
selectFilter = $( this ).attr('data-filter');
console.log(selectFilter)
$grid.isotope();
});

As you can see, this is definitely not the right method for binding my multi select filters. I understand that the .on(click) method does not account for unselected items. I understand I need to have a variable that stores the input (checkbox type) field values, and is updated every time those field values change. I then need to somehow reference that variable in the 'init Isotope' function below:

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;
    var selectResult = selectFilter ? $this.is( selectFilter ) : true;
    return searchResult && buttonResult && selectResult;
  }
});

You will notice the code commented out at the bottom of my codenpen js example. I understand how that is working, but I'm unable to incorporate it into my existing example.

End Result: I would like for the search field, button filters, and select filters to return combined search result after querying any elements in the isotope grid (.grid) with data-filter values.

Any help and explanation of the fix is appreciated!

Upvotes: 0

Views: 1524

Answers (1)

jawtt
jawtt

Reputation: 1

With a little help, I finally got this to work. Take a look at the Codepen here: https://codepen.io/jawtt/pen/pPaxzR

 function setCustomFilter() {
  var qsRegex = $('#quicksearch').val();
  console.log("qsregex:" + qsRegex);
  $('.element-item').removeClass('show');
  // if( $('.element-item').text().match(qsRegex) ) {
  //   $('.element-item').addClass('show');
  // }
  searchFilter = '';
  $('.element-item').each(function (index) {
    if (qsRegex == '') {
      $('.element-item').eq(index).addClass('show');
      searchFilter = '.show';
    } else  if ( $(this).text().toLowerCase().indexOf(qsRegex) >= 0) {
      console.log($(this).text());
      $('.element-item').eq(index).addClass('show');
      searchFilter = '.show';
    }

  });

Upvotes: 0

Related Questions