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.

Quentin Roy · Accepted Answer · 2016-07-27 11:08:12Z

3

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>

edited Jul 27, 2016 at 11:08

answered Jul 27, 2016 at 8:58

Quentin Roy

7,9272 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Storm Spirit Over a year ago

what's the meaning on the + on the front of +$(this).data('isactive') or +isActive

Quentin Roy Over a year ago

The + is used to make sure that the value is a number so that the === comparison works.

Quentin Roy Over a year ago

As an example, +"12" === 12.

Quentin Roy Over a year ago

You could also use strings only though. But as the values are numbers, I figured it is better to use them as such.

Daniel Minnaar · Accepted Answer · 2016-07-27 08:35:51Z

0

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

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

answered Jul 27, 2016 at 8:35

Daniel Minnaar

6,3556 gold badges34 silver badges55 bronze badges

1 Comment

Storm Spirit Over a year ago

this is not working cause I need to search all list. then hide or show them base on the filter. And this answer will not search all list and can't hide them base on the filter.

Jorrex · Accepted Answer · 2016-07-27 08:59:57Z

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>

Collectives™ on Stack Overflow

How to multiple filter list using jquery/javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related