# Adding Search function to Isotope's "hideReveal" plugin

**URL:** <https://forum.kirupa.com/t/adding-search-function-to-isotopes-hidereveal-plugin/640664>\
**Category:** web dev\
**Created:** [September 29, 2019, 2:38pm UTC](https://forum.kirupa.com/t/adding-search-function-to-isotopes-hidereveal-plugin/640664 "2019-09-29T14:38:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [September 29, 2019, 2:38pm UTC](https://forum.kirupa.com/t/adding-search-function-to-isotopes-hidereveal-plugin/640664/1 "2019-09-29T14:38:52Z")

</div>

Hi all,

I’ve adapted some code from Desandro’s “hideReveal” plugin for Isotope: [https://codepen.io/desandro/pen/drpJK/](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:

```auto
    <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:

```javascript
      $.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:

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

```

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [September 29, 2019, 3:33pm UTC](https://forum.kirupa.com/t/adding-search-function-to-isotopes-hidereveal-plugin/640664/2 "2019-09-29T15:33:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [September 29, 2019, 4:12pm UTC](https://forum.kirupa.com/t/adding-search-function-to-isotopes-hidereveal-plugin/640664/3 "2019-09-29T16:12:28Z")

</div>

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