Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    43
    Member #
    39433
    Liked
    1 times

    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:
    HTML Code:
    <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:
    Code:
      $.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:
    Code:
    .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.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    43
    Member #
    39433
    Liked
    1 times
    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 );
    };
    }

  4. #3
    Member
    Join Date
    Jun 2014
    Posts
    43
    Member #
    39433
    Liked
    1 times
    the problem is that it really screws up the positioning of the page! does anyone have any ideas how to make it keep positioning?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com