How to multiple filter list using jquery/javascript

Question

I have a html where I can filter based on their data but I don't know how to combine it.

This is my script and the search name is working already but the radio button isActive still not working and need to add on my filter. I don't know how to and it on filter.

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

so when I choose all = 2, then I will see all people, active = 1 I will see the active, then inActive = 0 to see the inactive people.

Answer 1

I would suggest using a single update function that you call when both the inputs or the textField change. In this update function, you would query the selected checkbox and the text field.

Other solutions would imply recording the selected values or pre-selecting the relevant elements to avoid querying the DOM each time, but in my opinion, it is not worth it.

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

Just add a check in the current if-statement. I did refactor your code a bit, since I was having some issues myself. This was mostly because my IDE was annoying me ...

But the snippet works and I hope it'll help you out.

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

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

Answer 3

Change your jQuery selector to exclude the data-isActive attributes you don't want:

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