Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我建议使用在输入或textField更改时调用的单个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>

Answer 2

更改您的jQuery选择器以排除您不想要的data-isActive属性：

$("ul li:not([data-isActive='0'])").each(function () {
    ...
}

Answer 3

只需在当前的if语句中添加一个检查。我确实重构了你的代码，因为我自己有一些问题。这主要是因为我的IDE让我烦恼......

但该片段有效，我希望它可以帮助你。

＆＃13;

$("input[name='search_name']").on("input", function() {
	var fullname = $(this).val();
  var isActive = $("input[type='radio'][name='isActive']:checked").val();
  
  searchStudent(fullname, isActive);
  
  //If input is empty, just trigger the checked radiobutton
  if(fullname === "")  	
  	$("input[type='radio'][name='isActive']:checked").change();
});


$("input[name='isActive']").change(function() {
	var fullname = $("input[name='search_name']").val();
  var isActive = $(this).val();
  
  searchStudent(fullname, isActive);
})


function searchStudent(pFullName, pIsActive)
{
	$("ul li").each(function() {
  	var element = $(this);
    var isActive = element.attr("data-isActive");
    
    if((element.data("fullname").search(new RegExp(pFullName, "i")) >= 0) && parseInt(isActive) === parseInt(pIsActive))
    	element.show();
    else
    	element.hide();
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


<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>

＆＃13;

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

3 个答案: