分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用jquery / javascript多个筛选器列表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个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>

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

解决方法

我建议使用在输入或textField更改时调用的单个更新函数.
在此更新功能中,您将查询所选复选框和文本字段.

其他解决方案意味着记录所选值或预先选择相关元素以避免每次查询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>