如何使用jquery/javascript多个筛选器列表

Question

我有一个html,我可以根据他们的数据进行过滤,但我不知道如何组合它.

这是我的脚本,搜索名称已经工作,但单选按钮isActive仍无法正常工作,需要在我的过滤器上添加.我不知道如何在过滤器上使用它.

$('input[type=text][name=search_name').on('input', function(e) {
  e.stopPropagation();
  e.preventDefault();

  var fullname = $(this).val();
  var isActive = $('input[type=radio][name=isActive]').val();
  searchStudent(fullname, isActive);
});

$('input[type=radio][name=isActive]').on('change', function(e) {
  e.stopPropagation();
  e.preventDefault();

  var fullname = $('input[type=text][name=search_name').val();
  var isActive = $(this).val();
  searchStudent(fullname, isActive);
});

function searchStudent(fullname, isActive) {
  $("ul li").each(function() {
    // I don't know how to add the isActive
    if ($(this).data('fullname').search(new RegExp(fullname, "i")) < 0) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="search_name">
  <span><input type="radio" checked="" autocomplete="off" value="2" name="isActive"> All</span>
  <span><input type="radio" autocomplete="off" value="1" name="isActive"> Active</span>
  <span><input type="radio" autocomplete="off" value="0" name="isActive"> Inactive</span>
</div>

<ul>
  <li data-fullname="Jerald Patalinghug" data-firstname="Jerald" data-lastname="Patalinghug" data-isActive="1">Jerald Patalinghug</li>
  <li data-fullname="Eldrin Gok-ong" data-firstname="Eldrin" data-lastname="Gok-ong" data-isActive="1">Eldrin Gok-ong</li>
  <li data-fullname="Uelmar Ortega" data-firstname="Uelmar" data-lastname="Ortega" data-isActive="0">Uelmar Ortega</li>
</ul>

所以当我选择时all = 2,我会看到所有人,active = 1我会看到活跃的,然后inActive = 0看到不活跃的人.

Answer 1

我建议使用update在输入或文本字段都发生更改时调用的单个函数。在此update函数中，您将查询选定的复选框和文本字段。

其他解决方案意味着记录所选值或预先选择相关元素以避免每次查询 DOM，但在我看来，这是不值得的。

$('input[type=text][name=search_name').on('input', updateFilter);
$('input[type=radio][name=isActive]').on('change', updateFilter);

function updateFilter(){
  var fullname = $('input[type=text][name=search_name').val();
  var isActive = $('input[type=radio][name=isActive]:checked').val();
  searchStudent(fullname, +isActive);
}

function searchStudent(fullname, isActive) {
  $("ul li").each(function() {
    if ($(this).data('fullname').search(new RegExp(fullname, "i")) < 0
         || isActive !== 2 && +$(this).data('isactive') !== isActive) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="search_name">
  <span><input type="radio" checked="true" autocomplete="off" value="2" name="isActive"> All</span>
  <span><input type="radio" autocomplete="off" value="1" name="isActive"> Active</span>
  <span><input type="radio" autocomplete="off" value="0" name="isActive"> Inactive</span>
</div>

<ul>
  <li data-fullname="Jerald Patalinghug" data-firstname="Jerald" data-lastname="Patalinghug" data-isActive="1">Jerald Patalinghug</li>
  <li data-fullname="Eldrin Gok-ong" data-firstname="Eldrin" data-lastname="Gok-ong" data-isActive="1">Eldrin Gok-ong</li>
  <li data-fullname="Uelmar Ortega" data-firstname="Uelmar" data-lastname="Ortega" data-isActive="0">Uelmar Ortega</li>
</ul>