Adding Search function to Isotope's "hideReveal" plugin

Adding Search function to Isotope's "hideReveal" plugin

Hi all,

I've adapted some code from Desandro's "hideReveal" plugin for Isotope: https://codepen.io/desandro/pen/drpJK/

But I am trying to add a search functionality to it, and I am having some trouble. Could someone help me out?

Here's what I have!

Thanks


HTML:
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

  3. <div id="filters" class="button-group">
  4.   <button class="button is-checked" data-filter="*">show all</button>
  5.   <button class="button" data-filter=".metal">metal</button>
  6.   <button class="button" data-filter=".transition">transition</button>
  7. </div>

  9.  <input type="text" id="quicksearch" placeholder="Search" class="form-control"/>

  11. <div class="isotope">
  12.   <div class="element-item transition metal " data-category="transition">
  13.     <h3 class="name">Mercury</h3>
  14.   </div>
  15.   <div class="element-item metalloid " data-category="metalloid">
  16.     <h3 class="name">Tellurium</h3>
  17.   </div>
  18.   <div class="element-item post-transition metal " data-category="post-transition">
  19.     <h3 class="name">Bismuth</h3>
  20.   </div>
  21.   <div class="element-item post-transition metal " data-category="post-transition">
  22.     <h3 class="name">Lead</h3>
  23.   </div>
  24.   <div class="element-item transition metal " data-category="transition">
  25.     <h3 class="name">Gold</h3>
  26.   </div>
  27.   </div>

  JS:
  1.   $.fn.hideReveal = function( options ) {
  2.   options = $.extend({
  3.     filter: '*',
  4.     hiddenStyle: { opacity: 0.0 },
  5.     visibleStyle: { opacity: 1 },
  6.   }, options );
  7.   this.each( function() {
  8.     var $items = $(this).children();
  9.     var $visible = $items.filter( options.filter );
  10.     var $hidden = $items.not( options.filter );
  11.     // reveal visible
  12.     $visible.animate( options.visibleStyle );
  13.     // hide hidden
  14.     $hidden.animate( options.hiddenStyle );
  15.   });
  16. };
  17. $( function() {
  18.   var $container = $('.isotope');
  19.   // filter functions
  20.   var filterFns = {};
  21.   // bind filter button click
  22.   $('#filters').on( 'click', 'button', function() {
  23.     var filterValue = $( this ).attr('data-filter');
  24.     // use filterFn if matches value
  25.     filterValue = filterFns[ filterValue ] || filterValue;
  26.     $container.hideReveal({ filter: filterValue });
  27.   });
  28.   // change is-checked class on buttons
  29.   $('.button-group').each( function( i, buttonGroup ) {
  30.     var $buttonGroup = $( buttonGroup );
  31.     $buttonGroup.on( 'click', 'button', function() {
  32.       $buttonGroup.find('.is-checked').removeClass('is-checked');
  33.       $( this ).addClass('is-checked');
  34.     });
  35.   });
  36. });


CSS:
  1. .button { display: inline-block; cursor: pointer; }
  2. .button:active, .button.is-checked { background-color: #28F; }
  3. .button.is-checked { color: white; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); }
  4. .button-group:after { content: ''; display: block; clear: both; }
  5. .button-group .button { float: left; border-radius: 0; margin-left: 0; margin-right: 1px; }
  6. .isotope { border: 2px solid #333; }
  7. /* clear fix */
  8. .isotope:after { content: ''; display: block; clear: both; }
  9. p{display: inline;}
  10. h3{display: inline;}
  11. .element-item { position: relative; float: left; margin: 5px; }
  12. .element-item > * { margin: 0; padding: 0; }