JavaScript Search Box for Table

This tutorial provides a clear and concise guide to creating a JavaScript search box for filtering table data. This functionality enhances user experience by allowing users to quickly find specific information within a table, making it easier to navigate and analyze data. We’ll walk through setting up the HTML structure, adding essential CSS for styling, and implementing the JavaScript code to enable the search functionality. This comprehensive guide will help you build a dynamic and user-friendly table filter with JavaScript.

<section class="container">
  <h2>Vanilla JS Table filter</h2>
  <input type="text" class="table-filter" data-table="order-table" placeholder="Item to filter.." />

  <table class="order-table table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@gmail.com</td>
        <td>0123456789</td>
        <td>99</td>
      </tr>

      <tr>
        <td>Jane Vanda</td>
        <td>jane@vanda.org</td>
        <td>9876543210</td>
        <td>349</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>alfred@batman.com</td>
        <td>6754328901</td>
        <td>199</td>
      </tr>
    </tbody>
  </table>

</section>
    <script  src="./script.js"></script>

.

(function() {
	'use strict';

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       //console.log(text);
      var val = input.value.toLowerCase();
      //console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
				});
			}
		};
 
	})();

  /*console.log(document.readyState);
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
      console.log(document.readyState);
			TableFilter.init();
		}
	}); */
  
 TableFilter.init(); 
})();