title: JQuery - Filtering data attributes with multiple filters of different inputs
body: <p>I am working on a project where by I want to use JQuery in order to filter on data variables embedded onto divs that are on the page, its sort of like a showcase in which the users will be able to filter in various ways. So I have the following in my Div;</p>
  
  <p><strong>HTML Result</strong></p>
  
  <pre><code>&lt;div class="box col-xs-6 col-sm-4 col-md-3 col-lg-2" 
      data-remote-name="BFT Mitto B RCB - 2 Button Remote" 
      data-remote-model="Mitto B RCB 2" 
      data-remote-freq="433" 
      data-remote-dips="" 
      data-remote-clone="" style="display: block;"&gt;
  </code></pre>
  
  <p>Data is pulled from an SQL table and hundreds of these are generated wit relevant data.</p>
  
  <p>I got the following for working with the name alone, but I can't seem to figure out a way to have it filter on all the other inputs, as well as have the name and model looked at with this one input.</p>
  
  <p><strong>JS/Query</strong></p>
  
  <pre><code>$('.box').hide().filter(function() {
      regExName = new RegExp($('#search-name').val().trim(), "ig");
      regExModel = new RegExp($('#search-name').val().trim(), "ig");
      return $(this).data("remote-name").match(regExName);
  }).show();
  </code></pre>
  
  <p>This is then towards the top of the page and where the filtering criteria is. It currently contains 1 text input, 2 check boxes and 2 dropdowns. There will be many, many more filters when done.</p>
  
  <pre><code>  &lt;div role="form" name="filters-form" id="filters-form"&gt;
  &lt;div class="col-sm-12"&gt;
    &lt;input class="form-control" id="search-name" placeholder="Search for name or model..."/&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-3 col-xs-6"&gt;
    &lt;div class="checkbox "&gt;
      &lt;label&gt;
        &lt;input type="checkbox" id="dispwitch" value="dispwitch"&gt;
        Has Dip Switches?
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="checkbox"&gt;
      &lt;label&gt;
        &lt;input type="checkbox" id="cloneable" value="cloneable"&gt;
        Cloneable?
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="col-sm-3 col-xs-6"&gt;
    Frequency:
    &lt;select class="freq-dropdown form-control" id="frequency" style="width:100%;"&gt;
      &lt;option value="all"&gt;All&lt;/option&gt;
      &lt;?php foreach ($this-&gt;frequencies AS $frequency) {
        echo "&lt;option value=\"" . $frequency-&gt;frequency . "\"&gt;" . $frequency-&gt;frequency . "&lt;/option&gt;";
      }?&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-3 col-xs-6"&gt;
    Manufacturer:
    &lt;select class="manufacturer-dropdown form-control" id="manufacturer" style="width:100%;"&gt;
      &lt;option value="all"&gt;All&lt;/option&gt;
      &lt;?php foreach ($this-&gt;manufacturers AS $manufacturer) {
        echo "&lt;option value=\"" . $manufacturer-&gt;name . "\"&gt;" . $manufacturer-&gt;name . "&lt;/option&gt;";
      }?&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-3 col-xs-6"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>EDIT:
  Below is my current JS file as well as the output of 'data' which is an object i use to store states of filters.</p>
  
  <pre><code>$(function() {
  $('.nav &gt; li#remotes').toggleClass('active');
  
  var data = { dips: null, cloneable: null, freq: null, manufacturer: null }; 
  
  $("#filters-form").on("change keyup paste", function(){
      if ($('#dispwitch').is(':checked')) { data.dips = "1"; } else { data.dips = "0"; }
      if ($('#cloneable').is(':checked')) { data.cloneable = "1"; } else { data.cloneable = "0"; }
      data.freq = $('#frequency').val();
      data.manufacturer = $('#manufacturer').val();
  
      $('.box').hide().filter(function() {
          regExName = new RegExp($('#search-name').val().trim(), "ig");
          regExModel = new RegExp($('#search-name').val().trim(), "ig");
          return $(this).data("remote-name").match(regExName); 
          //I took out the previous answers changes, this currently works filtering via name.
      }).show();
      console.log(data);
  }); 
  </code></pre>
  
  <p>});</p>
  
  <p>EDIT2:
  Another thing of note is some of the values are true/false/null so that needs to be accounted for in the filters. For example I got the check box filters semi-working with the following;</p>
  
  <pre><code>return $(this).data("remote-name").match(regExName) &amp;&amp; $(this).data("remote-clone") == data.cloneable &amp;&amp; $(this).data("remote-dips") == data.dips;
  </code></pre>
  
  <p>BUT... For those which have <code>[data-remote-dips=""]</code> as oppose to 1 or 0, once the filter is turned on or off a single time, the null valued are never shown until a refresh. Same issue with putting the dropdown to 'All' instead of a desired result, it then shows nothing on the page.</p>