Example: Filtering a Table by Key Press

	<meta charset="UTF-8">
	<title>HTML JQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	  $("#myInput").on("keyup", function() {
		var value = $(this).val().toLowerCase();
		$("#myTable tr").filter(function() {
		  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
	table {
	  font-family: arial, sans-serif;
	  border-collapse: collapse;
	  width: 100%;
	td, th {
	  border: 1px solid #dddddd;
	  text-align: left;
	  padding: 8px;
	th {
	  background-color: #0143ad;
	  color: white;
	tr:nth-child(even) {
	  background-color: #c3d7f7;

	<h2>January Customers</h2>

	<p>Enter text to filter customers displayed:</p>  

	<p><input id="myInput" type="text" placeholder="Enter text..."></p>

	  <tbody id="myTable">
		<td>Dearborn Heights</td>
		<td>Allen Park</td>

The code above does the following:

  • As keys pressed on keyboard in myInput search box, examine each row of the table to check for text matches with text inputted in myInput search box by user
  • toLowerCase() converts text to lowercase so search is case insensitive
  • Table heading row is exlcuded from filtering
  • toggle() method only displays table rows that match

Run it: