JSFiddle - React, Tailwind, and code Playground

by jpark7ca

HTML

<input type="text" id="item-lookup"  placeholder="type the judge's name here">
<br>
<br>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Calendar</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>8/15/2016</td>
      <td>Calendar</td>
    </tr>
    <tr>
      <td>Mary Smith</td>
      <td>8/15/2016</td>
      <td>Calendar</td>
    </tr>
    <tr>
      <td>Peter Rabbit</td>
      <td>8/15/2016</td>
      <td>Calendar</td>
    </tr>
    <tr>
      <td>Tom Kitten</td>
      <td>8/15/2016</td>
      <td>Calendar</td>
    </tr>
    <tr>
      <td>Gil-Dong Hong</td>
      <td>8/15/2016</td>
      <td>Calendar</td>
    </tr>
  </tbody>
</table>

CSS

.mdc-hide {
  display: none;
}

JavaScript

$(document).ready(function(){

	$('#item-lookup').keyup(function(e){
		// reset the division seleect element
		
		var $rows = $('table tbody tr');

		var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

		val = val.length < 3 ? "" : val; 

		$rows.show().filter(function(){
			
			var text = $(this).find("td:eq(0), td:eq(1)").text().replace(/\s+/g, ' ').toLowerCase();
			
			return ! ~text.indexOf(val);
		}).hide();

	});

});