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>