Isotope with search filter searching against content of data-attibute

I’m using Jquery Isotope with both a keyword filter and a search filter which works fine.

I’m trying to get the search filter to search both through the data-filtertext and the content. The data-attribute contains hidden keywords that should be used to match against as well.

To be honest I don’t know where to start since I’m pretty new at JS/Jquery.

Please take a look at this codepen.


    <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>
      <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
      <button class="button" data-filter=":not(.transition)">not transition</button>
      <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
    <div class="isotope">
      <div class="element-item transition metal" data-category="transition" data-filtertext="lorem ipsum">
        <h3 class="name">Mercury</h3>
        <p class="symbol">Hg</p>
        <p class="number">80</p>
        <p class="weight">200.59</p>
      <div class="element-item metalloid " data-category="metalloid" data-filtertext="dolor sit">
        <h3 class="name">Tellurium</h3>
        <p class="symbol">Te</p>
        <p class="number">52</p>
        <p class="weight">127.6</p>
      <div class="element-item post-transition metal " data-category="post-transition" data-filtertext="amet consectetur">
        <h3 class="name">Bismuth</h3>
        <p class="symbol">Bi</p>
        <p class="number">83</p>
        <p class="weight">208.980</p>
      <div class="element-item post-transition metal " data-category="post-transition" data-filtertext="adipiscing elit">
        <h3 class="name">Lead</h3>
        <p class="symbol">Pb</p>
        <p class="number">82</p>
        <p class="weight">207.2</p>
      <div class="element-item transition metal " data-category="transition" data-filtertext="Nulla metus">
        <h3 class="name">Gold</h3>
        <p class="symbol">Au</p>
        <p class="number">79</p>
        <p class="weight">196.967</p>
      <div class="element-item alkali metal " data-category="alkali" data-filtertext="tincidunt lacus">
        <h3 class="name">Potassium</h3>
        <p class="symbol">K</p>
        <p class="number">19</p>
        <p class="weight">39.0983</p>
      <div class="element-item alkali metal " data-category="alkali" data-filtertext="vulputate id">
        <h3 class="name">Sodium</h3>
        <p class="symbol">Na</p>
        <p class="number">11</p>
        <p class="weight">22.99</p>
      <div class="element-item transition metal " data-category="transition" data-filtertext="consequat vel">
        <h3 class="name">Cadmium</h3>
        <p class="symbol">Cd</p>
        <p class="number">48</p>
        <p class="weight">112.411</p>


    $( function() {
      // quick search regex
      var qsRegex;
      var buttonFilter;

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

      $('#filters').on( 'click', 'button', function() {
        buttonFilter = $( this ).attr('data-filter');

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

        // change is-checked class on buttons
      $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
          $( this ).addClass('is-checked');


    // debounce so filtering doesn't happen every millisecond
    function debounce( fn, threshold ) {
      var timeout;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        function delayed() {
          timeout = null;
        setTimeout( delayed, threshold || 100 );

Source: jquery

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.