title: Product filtering using multiple HTML5 data-attributtes
body: <p>I have a function that I would like to return products based on a usermade filter via check boxes.</p>
  
  <p>Basically:</p>
  
  <blockquote>
    <p>Each product has multiple data-attributtes, for example: data-brand="acer", data-price="2995", data-screensize="15.6", data-processor="intel"</p>
  </blockquote>
  
  <p>So say i'm lining up 40 products, the users need to be able to narrow down the product listing.</p>
  
  <p>At the moment my function, shows all that is clicked, and doesnt narrow down the product listing.</p>
  
  <p>Not being a JQuery shark, I could use som input on how I can filter the products. </p>
  
  <hr>
  
  <p>I have added a fiddle here: <a href="http://jsfiddle.net/Klemme/czE6x/14/" rel="nofollow">http://jsfiddle.net/Klemme/czE6x/14/</a></p>
  
  <p>Any feedback appreciated lots, thank you.</p>
  
  <hr>
  
  <p>This is what I have at the moment:</p>
  
  <pre><code>function filterFunction()
  {
      //if( $( "input[name='screen_group[]']:checked" ).length &gt; 0 ) 
      if( $( "input[type='checkbox']:checked" ).length &gt; 0 ) 
      {
          $( '.produkt_gruppe_div' ).hide();
  
          searchScreens   = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // &lt;----  
          searchBrands    = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // &lt;----   
          // Combine marked filters (checkboxes)
          var params      = searchScreens.concat( searchBrands );
  
          // Available data-atr, from the first product element
          filterAttributtes = $( '.product_gruppe_div:first' ).data();
  
          var searchValues = [];
          // Loop marked checkboxes,display products that has a matching data-atr="value"
          $.each( params, function( key, value )
          {           
              $('[data-screensize="' + value + '"]').show();
              $('[data-brand_name="' + value + '"]').show();          
  
              //$( '.produkt_gruppe_div' ).filter('[data-screensize="' + value + '"]').addClass('screen').fadeIn(300);    
  
              //$( '.produkt_gruppe_div' ).filter('[data-brand_name="' + value + '"]').addClass('brand').fadeIn(300);         
          }); 
      } 
      else 
      {
          // Vis alle, hvis der ikke er afmærket noget
          $('.produkt_gruppe_div').show();
      }   
  }
  </code></pre>
  
  <p>So when a user selects "Acer and Lenovo" as Brand, and "15.6 and 14" as screensize, I need to only display the products which data-brand="acer of lenove" and data-screensize="15.6 or 14" and so on.</p>
  
  <p>There is at the moment 6 filteres to each products, which defines the product details. And I have tjeckboxes that has an ID corresponding to the data-atr="value".</p>
  
  <p>Hope someone can see how I can hide all, and then only show products that contains either of the values.</p>
  
  <p>Best regards, Klemme</p>
  
  <p>EDIT EDIT:::</p>
  
  <p><strong>Here is my markup:</strong></p>
  
  <pre><code>&lt;div class="product_gruppe_div" data-brand="acer" data-screensize="15.6" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  
  &lt;div class="product_gruppe_div" data-brand="lenovo" data-screensize="15.6" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  
  &lt;div class="product_gruppe_div" data-brand="acer" data-screensize="15.6" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  
  &lt;div class="product_gruppe_div" data-brand="hp" data-screensize="15.4" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  
  &lt;div class="product_gruppe_div" data-brand="hp" data-screensize="14" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  
  &lt;div class="product_gruppe_div" data-brand="fujitsu" data-screensize="14" data-processor="intel"&gt; - Product info - &lt;/div&gt;
  </code></pre>
  
  <p>And checkboxes:</p>
  
  <pre><code>&lt;input type="checkbox" name="screen_group[]" value="18.4" id="18.4" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;18,4"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="17.3" id="17.3" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;17,3"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="15.6" id="15.6" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;15,6"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="15.5" id="15.5" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;15,5"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="15.4" id="15.4" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;15,4"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="14" id="14" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;14"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="13.3" id="13.3" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;13,3"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="12.5" id="12.5" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;12,5"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="11.6" id="11.6" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;11,6"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="11" id="11" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;11"&lt;/span&gt;&lt;br /&gt;
  &lt;input type="checkbox" name="screen_group[]" value="10.1" id="10.1" onClick="filterFunction()" /&gt;&amp;nbsp;&lt;span class="filter_paragraphs"&gt;10,1"&lt;/span&gt;&lt;br /&gt;
  </code></pre>
  
  <p>The same principle for brand, and processor and so on.</p>
  
  <p>EDIT TWO:</p>
  
  <p>Here is another option, where I can list multiple brands, and after that tjeck what is visible on the screen, and then run a tjeck on screensizes.</p>
  
  <p>This lets me filter on all brands, and a screensize on say 15.6".</p>
  
  <p>Problem is, that I can only choose ONE screensize checkbox, if I choose multiple, I loose all the products on the screen.</p>
  
  <p>Cant seem to see hos I can modify it.</p>
  
  <p>PATEL:</p>
  
  <p>Do you reckon it can be integrated in your code on: <a href="http://jsfiddle.net/Klemme/czE6x/38/" rel="nofollow">http://jsfiddle.net/Klemme/czE6x/38/</a> ?</p>
  
  <pre><code>function filterFunction()
  {
  if( $( "input[type='checkbox']:checked" ).length &gt; 0 ) 
  {
  $( '.produkt_gruppe_div' ).hide();
  
  searchScreens   = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // &lt;----  
      searchBrands    = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // &lt;----   
  
  var searchValues = [];
  
  $.each( searchBrands, function( key, value )
  {   
      console.log( searchBrands );    
  
      // Vis kun de valgte brands på siden
      $('[data-brand_name="' + value + '"]').show();
      // $('[data-screensize="' + value + '"]').show();       
  
      // Align produkt_gruppe_div efter indlæsning
      alignFilteredProducts();    
  
  }); 
  
  
      $.each( searchScreens, function( key, value )
      {                       
      $('.produkt_gruppe_div').each(function( index, element ) 
      {               
      if( $( this ).is( ':visible' ) )
      {
      // Vis kun de valgte screensizes på siden
      //$( '[data-screensize="' + value + '"]' ).show();
      $( '.produkt_gruppe_div' ).not('[data-screensize="' + value + '"]').fadeOut( 300 );
   }
      alignFilteredProducts();
      });
  });                 
  
  } 
  else 
  {
  $('.produkt_gruppe_div').show();
  }   
  }
  </code></pre>
  
  <p>The best, Klemme</p>