This is a super-light jQuery plugin that combines internal page search functionality with the Isotope plugin
http://benrlodge.github.io/isotopeSearchFilter/
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.
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.
PRs and feature requests are welcomed. If you wish to contribute please make updates in the coffee file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent