Adding Search function to Isotope's "hideReveal" plugin

programming web dev
1

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:

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

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

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

    <div class="isotope">
      <div class="element-item transition metal " data-category="transition">
        <h3 class="name">Mercury</h3>
      </div>
      <div class="element-item metalloid " data-category="metalloid">
        <h3 class="name">Tellurium</h3>
      </div>
      <div class="element-item post-transition metal " data-category="post-transition">
        <h3 class="name">Bismuth</h3>
      </div>
      <div class="element-item post-transition metal " data-category="post-transition">
        <h3 class="name">Lead</h3>
      </div>
      <div class="element-item transition metal " data-category="transition">
        <h3 class="name">Gold</h3>
      </div>
      </div>

JS:

      $.fn.hideReveal = function( options ) {
      options = $.extend({
        filter: '*',
        hiddenStyle: { opacity: 0.0 },
        visibleStyle: { opacity: 1 },
      }, options );
      this.each( function() {
        var $items = $(this).children();
        var $visible = $items.filter( options.filter );
        var $hidden = $items.not( options.filter );
        // reveal visible
        $visible.animate( options.visibleStyle );
        // hide hidden
        $hidden.animate( options.hiddenStyle );
      });
    };
    $( function() {
      var $container = $('.isotope');
      // filter functions
      var filterFns = {};
      // bind filter button click
      $('#filters').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.hideReveal({ filter: filterValue });
      });
      // change is-checked class on buttons
      $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
          $buttonGroup.find('.is-checked').removeClass('is-checked');
          $( this ).addClass('is-checked');
        });
      });
    });

CSS:

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

found my own answer, just adding will do the trick:

// quick search regex
var qsRegex;

// init Isotope
var $grid = $('.isotope').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  filter: function() {
    return qsRegex ? $(this).text().match( qsRegex ) : true;
  }
});

// use value of search field to filter
var $quicksearch = $('.form-control').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}, 200 ) );

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };
}
3

the problem is that it really screws up the positioning of the page! does anyone have any ideas how to make it keep positioning?