isotopeSearchFilter jQuery plugin

This is a super-light jQuery plugin that combines internal page search functionality with the Isotope plugin

Demo:

http://benrlodge.github.io/isotopeSearchFilter/

How to Use:

Load up the isotope plugin, then chain on isotopeSearchFilter().

If your sorting containers use images, I recommend David DeSandro's imagesloaded.

  $(document).ready(function(){
    var $container = $('.item-container')
    
    $container.isotope({
      itemSelector: '.item',
      layoutMode: 'fitRows' 
    }).isotopeSearchFilter();

  })


  // With imagesLoaded:

  $(document).ready(function(){
    var $container = $('.item-container')
    
    imagesLoaded( '.item-container', function() {
      $container.isotope({
        itemSelector: '.item',
        layoutMode: 'fitRows' 
      }).isotopeSearchFilter();
    });
  })    

Available Options:

  isotopeSearchFilter({
    itemsContainer: ".item-container",
    itemSelector: ".item",
    filtersSelector: ".filters",
    searchResultsClassSelector: ".active",
    inputSearch: '#search-term'
  })

Dependencies

• jQuery
• Metafizzy Isotope http://isotope.metafizzy.co/
• If your content contains images use: imagesloaded.

Related Plugins:

isotopeDropdownFilters:

https://github.com/benrlodge/isotopeDropdownFilters

This is a jQuery plugin that makes it easy to incorporate dropdowns and multi-select filtering using the Isotope plugin.

Contributions:

PRs and feature requests are welcomed. If you wish to contribute please make updates in the coffee file.