JQuery - Filtering data attributes with multiple filters for different inputs

Question

I am working on a project where I want to use jQuery to filter data variables embedded in divs that are on a page, sort of like a showcase in which users can filter in various ways. So, I have the following in my Div;

HTML result

<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;">

Data is retrieved from the SQL table, and hundreds of them are generated by the corresponding data.

I have the following for working with a name alone, but I can’t figure out how to filter it on all other inputs, and also have a name and model with this one input.

JS / Request

$('.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();

. 1 , 2 2 . , .

  <div role="form" name="filters-form" id="filters-form">
<div class="col-sm-12">
  <input class="form-control" id="search-name" placeholder="Search for name or model..."/>
</div>

<div class="col-sm-3 col-xs-6">
  <div class="checkbox ">
    <label>
      <input type="checkbox" id="dispwitch" value="dispwitch">
      Has Dip Switches?
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" id="cloneable" value="cloneable">
      Cloneable?
    </label>
  </div>
</div>  

<div class="col-sm-3 col-xs-6">
  Frequency:
  <select class="freq-dropdown form-control" id="frequency" style="width:100%;">
    <option value="all">All</option>
    <?php foreach ($this->frequencies AS $frequency) {
      echo "<option value=\"" . $frequency->frequency . "\">" . $frequency->frequency . "</option>";
    }?>
  </select>
</div>

<div class="col-sm-3 col-xs-6">
  Manufacturer:
  <select class="manufacturer-dropdown form-control" id="manufacturer" style="width:100%;">
    <option value="all">All</option>
    <?php foreach ($this->manufacturers AS $manufacturer) {
      echo "<option value=\"" . $manufacturer->name . "\">" . $manufacturer->name . "</option>";
    }?>
  </select>
</div>

<div class="col-sm-3 col-xs-6">

</div>

.

EDIT: JS , "", , .

$(function() {
$('.nav > 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);
}); 

});

EDIT2: : true/false/null, . , , :

return $(this).data("remote-name").match(regExName) && $(this).data("remote-clone") == data.cloneable && $(this).data("remote-dips") == data.dips;

... , [data-remote-dips=""] 1 0, , . "" , .

Answer 1

, JSFiddle , , RegExp, @David Johnson .

https://jsfiddle.net/JokerDan/tqv0ybbz/2/

HTML

<div class="status"></div>
<div id="filterDiv">
  <input type="text" class="myInput" id="0"/>

  <select class="mySel" id="1">
    <option value="">All</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>

  <select class="mySel" id="2">
    <option value="">All</option>
    <option value="123">123</option>
    <option value="231">231</option>
    <option value="321">321</option>
  </select>

  <input type="checkbox" id="3"> Test Data :: 1 | 0 | NULL
</div>
<p class="p a 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<p class="p b 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<p class="p c 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<p class="p a 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<p class="p a 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 1</p>
<p class="p c 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 1</p>

JS

$('#filterDiv').on("change keyup", function() {
  chkBox = { datatest: null };

  if ($('#3').is(':checked')) { chkBox.datatest = "1"; } else { chkBox.datatest = ""; }

  $("p").hide().filter(function() {
    var rtnData = "";

    regExName   = new RegExp($('#0').val().trim(), "ig");
    regExA          = new RegExp($('#1').val().trim(), "ig");
    regExB          = new RegExp($('#2').val().trim(), "ig");
    regExTest       = new RegExp(chkBox.datatest, "ig")

    rtnData = (
      $(this).attr("data-name").match(regExName) && 
      $(this).attr("data-a").match(regExA) && 
      $(this).attr("data-b").match(regExB) &&
      $(this).attr("data-test").match(regExTest)
    );

    //console.log(rtnData);
    return rtnData;
  }).show();
});

Answer 2

:

freq = new RegExp($('#frequency').val().trim(), "ig"); 
dips= new RegExp($('#dispwitch').val().trim(), "ig");
clone= new RegExp($('#cloneable').val().trim(), "ig");

return $(this).data("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $(this).data("remote-dips").match(dips) || $(this).data("remote-clone").match(clone)