JQuery - Filtering data attributes with multiple filters of different inputs
<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>