JQuery - 使用不同输入的多个筛选器过滤数据属性

我正在做一个项目，我想使用 JQuery 来过滤嵌入到页面上div 上的数据变量，它有点像一个展示，用户将能够以各种方式过滤。所以我的 Div 中有以下内容;

网页结果

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

数据是从 SQL 表中提取的，其中数百个数据是与相关数据一起生成的。

我因单独使用名称而得到了以下内容，但我似乎无法找到一种方法来过滤所有其他输入，以及使用这个输入查看名称和模型。

JS/查询

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

任何帮助将不胜感激。

编辑：下面是我当前的JS文件以及"data"的输出，它是我用来存储过滤器状态的对象。

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

}(;

编辑2：另一件需要注意的事情是一些值是真/假/空的，因此需要在过滤器中加以考虑。例如，我让复选框过滤器半处理以下内容;

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

但。。。对于那些[data-remote-dips=""]与 1 或 0 相反的用户，一旦打开或关闭过滤器一次，null 值在刷新之前永远不会显示。将下拉列表放在"全部"而不是所需结果的相同问题，然后它在页面上不显示任何内容。