Last active
January 11, 2018 15:57
-
-
Save ksascomm/5395c44f5ed7634e4b7b98fa9c05df43 to your computer and use it in GitHub Desktop.
combination filter with search
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(document).ready( function($) { | |
| // 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 ); | |
| }; | |
| } | |
| // initially hide noresult box on page load | |
| $('#noResult').hide(); | |
| var qsRegex; | |
| var filterValue; | |
| // init Isotope | |
| var $grid = $('#isotope-list').isotope({ | |
| itemSelector: '.person', | |
| layoutMode: 'vertical', | |
| filter: function() { | |
| var $this = $(this); | |
| var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; | |
| //Q: This variable is where the magic needs to happen | |
| var filterResult = filterValue ? $this.is( filterValue ) : true; | |
| return searchResult && filterResult; | |
| } | |
| }); | |
| // layout Isotope again after all images have loaded | |
| $grid.imagesLoaded( function() { | |
| $grid.isotope('layout'); | |
| }); | |
| // SEARCH FUNCTION | |
| // use value of search field to filter | |
| var $quicksearch = $('#id_search').keyup( debounce( function() { | |
| qsRegex = new RegExp( $quicksearch.val(), 'gi' ); | |
| $grid.isotope(); | |
| // display message box if no filtered items | |
| if ( !$grid.data('isotope').filteredItems.length ) { | |
| $('#noResult').show(); | |
| } else { | |
| $('#noResult').hide(); | |
| } | |
| }) ); | |
| //wrap up search function | |
| $('.filter-list li a').click(function(event){ | |
| event.preventDefault(); | |
| }); | |
| // FILTER FUNCTION | |
| // Array to store filter from each group. | |
| var filters = {}; | |
| $('.filter-list a').on('click', function() { | |
| // Get navigation group (subject or author) as object. | |
| var $navGroup = $(this).parents('.filter-list'); | |
| // Get data-filter-group attribute for current nav group. | |
| var filterGroup = $navGroup.attr('data-filter-group'); | |
| // If button is already active (checked): | |
| if ( $(this).hasClass('is-checked')) { | |
| $(this).removeClass('is-checked'); | |
| // Reset array entry with filterGroup as key. | |
| filters[ filterGroup ] = '*'; | |
| } else { | |
| // Find any checked buttons in the current filter group | |
| // and remove .checked class. | |
| $navGroup.find('a').removeClass('is-checked'); | |
| // Set array entry with filterGroup as key to current data-filter value. | |
| filters[ filterGroup ] = $(this).attr('data-filter'); | |
| $(this).addClass('is-checked'); | |
| } | |
| // Grab concatenated filter values via concatenateValues function. | |
| filterValue = concatenateValues( filters ); | |
| // Run the filter. | |
| $grid.isotope({ filter: filterValue }); | |
| }); | |
| // Concatenate values from array to a single string. | |
| function concatenateValues( object ) { | |
| var values = ""; | |
| for ( var value in object ) { | |
| values += object[value]; | |
| } | |
| return values; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment