Make 3 search input fields work together

Question

I have 3 search inputs, one for SN, one for TITLE and one for DATE and I with to make them work together in perfect harmony.

Buuuuut, that isn't the case right now.. individually they are working pretty fine but while pressing 25 in the SN input reveals allan and joy's row, pressing an o in the NAME input is enough to negate the first filter and instead of showing only joy since she is the only one with 25 in the SN and with an o in the name, it scot too...and this goes on.

How can I fix this, guys?

jsfiddle

chubby JS

$(document).ready(function() {
  $('#sn').keyup(function() {
    var searchTerm = $(this).val().replace(/ /g, '').toLowerCase();
    $(".sn").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
  $('#title').keyup(function() {
    var searchTerm2 = $(this).val().replace(/ /g, '').toLowerCase();
    $(".title").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm2)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
  $('#date').keyup(function() {
    var searchTerm3 = $(this).val().replace(/ /g, '').toLowerCase();
    $(".date").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm3)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
});

Answer 1

So you need to filter your row based on ALL your filtering inputs, you are only filtering based on the filtering currently being typed in.

I made one filter function, it checks for all possible filters and filters row on all of them. Check comments as well for explanation of the if statements if it does not make sense.

PS. Your HTML for Joy's row in your fiddle was also messed up. ( Has no sn column, and joy does not have a class attribute )

	$(document).ready(function() {
	  $('#sn').keyup(function() {
	    filter();
	  });
	  $('#title').keyup(function() {
	    filter();
	  });
	  $('#date').keyup(function() {
	    filter();
	  });
    
    function filter() {
    	var sn = $("#sn").val().replace(/ /g, '').toLowerCase();
    	var title = $("#title").val().replace(/ /g, '').toLowerCase();
    	var date = $("#date").val().replace(/ /g, '').toLowerCase();
    
    	$("tr.fill").each(function() {
      	var showRow = true;
        // if there is a value for filtering sn AND this row's does NOT have a match, hide row
        if (sn && !($(this).find('.sn').text().replace(/ /g, '').toLowerCase().match(sn))) {
        	showRow = false;
        }
        // if row is not already meant to be hidden AND there is a value for filtering title AND this row's does NOT have a match, hide row
        if (showRow && title && !($(this).find('.title').text().replace(/ /g, '').toLowerCase().match(title))) {
        	showRow = false;
        }
        // if row is not already meant to be hidden AND there is a value for filtering date AND this row's does NOT have a match, hide row
        if (showRow && date && !($(this).find('.date').text().replace(/ /g, '').toLowerCase().match(date))) {
        	showRow = false;
        }
        
        if (showRow) {
        	$(this).show();
        } else {
        	$(this).hide();
        }
      });
    }
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr class="header">
    <td>SN.</td>
    <td>Title</td>
    <td>Date</td>
  </tr>

  <tr>
    <td>
      <input id="sn" type="text" placeholder="Search by SN" />
    </td>
    <td>
      <input id="title" type="text" placeholder="Search by Title" />
    </td>
    <td>
      <input id="date" type="text" placeholder="Search by Date" />
    </td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 254691</td>
    <td class="title">allan</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
<td class="sn">RB 252611</td>
<td class="title">joy</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 354792</td>
    <td class="title">daisy</td>
    <td class="date">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 54692</td>
    <td class="title">scot</td>
    <td class="date">29.10.2016</td>
  </tr>
</table>