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; }

 

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 );
  };
}

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

You probably need to recalculate the Isotope layout in your debounce function. Does the layout sort itself out again when you resize the screen?

5 hours ago, Jack said:

You probably need to recalculate the Isotope layout in your debounce function. Does the layout sort itself out again when you resize the screen?

yes exactly. even when i do a search, then undo the search, it corrects everything. 

 

Quote

recalculate the Isotope layout in your debounce function

do have any idea how to do this?

If you're able to setup a working demo on something like https://codepen.io I can take a look.

On 10/1/2019 at 9:09 AM, Jack said:

If you're able to setup a working demo on something like https://codepen.io I can take a look.

here's the demo: https://codepen.io/3igdw94y/pen/PoYMXqr

you'll notice that it starts oddly, and after doing and undoing a search it corrects itself!

Is this closer to what you're after https://codepen.io/jackpallot/pen/PooYqgO?

I have adjusted some of the CSS and opacity settings so I could test it a bit easier.

2 hours ago, Jack said:

Is this closer to what you're after https://codepen.io/jackpallot/pen/PooYqgO?

I have adjusted some of the CSS and opacity settings so I could test it a bit easier.

fantastic! works like a charm!

would you know how keep one ".element-item"  always in the same place? ie. as though it is "sticky"?

 

I'm not sure what you mean. Do you want the boxes to stay in place when you search, like the effect from the filter buttons?

36 minutes ago, Jack said:

I'm not sure what you mean. Do you want the boxes to stay in place when you search, like the effect from the filter buttons?

for example imagine if the "Bismuth" div is unaffected by both search and a filter, and just stays put. like a sticky header would

I have changed this so an item can always be visible, even when searched and filtered, but it seems a bit weird to me https://codepen.io/jackpallot/pen/PooYqgO. You just need to add a class of "sticky" to the items you want to keep.

3 hours ago, Jack said:

I have changed this so an item can always be visible, even when searched and filtered, but it seems a bit weird to me https://codepen.io/jackpallot/pen/PooYqgO. You just need to add a class of "sticky" to the items you want to keep.

again you nailed it!  amazing...