Storm Spirit Storm Spirit - 4 months ago 8
jQuery Question

How to multiple filter list using jquery/javascript

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

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.

Another solutions would imply storing the previously selected values to avoid unnecessary document queries, 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>