javascript - Filters + Search with Isotopes Breaks Search? - Stack Overflow

admin管理员组

文章数量:1310519

I am using Isotopes (v1) and have created a search field following an example in a Pen.

Initially it works, however, if I filter the Isotope gallery then the search field stops working.

I believe the search function still runs just doesn't filter the gallery and I am unsure how to fix the problem. In fact I am unsure what the exact problem is as no errors are thrown.

Here is a Fiddle with a working example.

Here is the search, filter and isotope JavaScript:

var $container = $('.isotope'),
    qsRegex,
    filters = {};

$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  },
filter: function() {
  return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope();
}

// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );

$('#reset').on( 'click', function() {
  $quicksearch.val('');
  searchFilter()
});
    
     // store filter for each group
    
    
    $('#filters').on( 'click', '.button', function() {
      var $this = $(this);
      // get group key
      var $buttonGroup = $this.parents('.button-group');
      var filterGroup = $buttonGroup.attr('data-filter-group');
      // set filter for group
      filters[ filterGroup ] = $this.attr('data-filter');
      // bine filters
      var filterValue = '';
      for ( var prop in filters ) {
        filterValue += filters[ prop ];
      }
      // set filter for Isotope
      $container.isotope({ filter: filterValue });
        
    });
    
    // 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 );
    }
    }

How do I solve the problem?

Note: I am using jQuery 2.1.1.

I am using Isotopes (v1) and have created a search field following an example in a Pen.

Initially it works, however, if I filter the Isotope gallery then the search field stops working.

I believe the search function still runs just doesn't filter the gallery and I am unsure how to fix the problem. In fact I am unsure what the exact problem is as no errors are thrown.

Here is a Fiddle with a working example.

Here is the search, filter and isotope JavaScript:

var $container = $('.isotope'),
    qsRegex,
    filters = {};

$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  },
filter: function() {
  return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope();
}

// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );

$('#reset').on( 'click', function() {
  $quicksearch.val('');
  searchFilter()
});
    
     // store filter for each group
    
    
    $('#filters').on( 'click', '.button', function() {
      var $this = $(this);
      // get group key
      var $buttonGroup = $this.parents('.button-group');
      var filterGroup = $buttonGroup.attr('data-filter-group');
      // set filter for group
      filters[ filterGroup ] = $this.attr('data-filter');
      // bine filters
      var filterValue = '';
      for ( var prop in filters ) {
        filterValue += filters[ prop ];
      }
      // set filter for Isotope
      $container.isotope({ filter: filterValue });
        
    });
    
    // 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 );
    }
    }

How do I solve the problem?

Note: I am using jQuery 2.1.1.

• javascript
• jquery
• jquery-isotope

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 23, 2014 at 1:05 L84L84 46.3k5959 gold badges181181 silver badges259259 bronze badges 3

• can you make a Fiddle? – Dave Alperovich Commented Jun 11, 2014 at 11:32
• @DaveA - There is a fiddle in my question. Just above my code is the link. – L84 Commented Jun 13, 2014 at 4:18
• 1 @MohdDhiyaulhaq - You edited the question and added the tag jsFiddle. You should not add that tag, from jsFiddle tag wiki: This tag should be used when asking a question about jsFiddle, not because your question merely contains an example hosted on jsFiddle. – L84 Commented Jun 18, 2014 at 2:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

In you example $('#filters').on('click', '.button', function () stoping the search function and you reset buton placed inside #filters div so when you click it search engine is stoped too.

I have not the best solution, but it solve some problems:

Idea in using function to call engine back:

var iso = function() {

//engine here

}

and

$(function () {
   iso();
   $('.iso').click(function(){
      setTimeout(iso, 500);
});
});

without setTimeout it can't work.

But it don't solve the main problem

look at FIDDLE and you'll understand what I mean

Or you just can place reset and Show All buttons outside #filters div

I faced the same problem implementing Filters + Search functionality.

I solved this problem passing the filter function to the Isotope call ($container.isotope();) in the search function (function searchFilter(){...}) instead of when initializing the Isotope instance.

So, in your code it should be like this:

// No filter specified when initializing the Isotope instance
$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  }
});

// Instead, the filter is specified here
function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope({
    filter: function() {
     return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
  });
}

本文标签： javascriptFiltersSearch with Isotopes Breaks SearchStack Overflow