JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<input id="filter-field" placeholder="Search" type="text" />

    <table cellspacing="0" cellpadding="0" >
        <thead>
            <tr>
                <th>Pet</th>
                <th>Colour</th>
            </tr>
        </thead>
        <tbody>
        	<tr>    
        		<td>cat</td>
                <td>white</td>
    	    </tr>
        	<tr>
        		<td>dog</td>
                <td>black</td>
        	</tr>
        	<tr>
        		<td>parrot</td>
                <td>yellow</td>
        	</tr>
        	<tr>
        		<td>fish</td>
                <td>yellow</td>
        	</tr>
        	<tr>
        		<td>hamster</td>
                <td>black</td>
        	</tr>
        </tbody>
    </table>

CSS

table, td {
    border:solid 1px #ccc;
}
th {
    background-color:#eaeaea;
}

JavaScript

$("#filter-field").on('input', function() {
 
			// Split the current value of searchInput
			var data = this.value.split(" "),
				inputLength = $("#filter-field").val().length;

			// Create a jquery object of the rows
			var jo = $("table > tbody").find("tr");

			if (this.value == "") {
				jo.show();
				return;
			}

			// Hide all the rows
			jo.hide();

			jo.filter(function() {
				var $t = $(this),
					textField = $('#filter-field').val().split(" "),
					wordCount = textField.length - 1, // Get length of array, then subtract 1 so '1 word' matches 'position 0' in array
					wordCounter = [];

				wordCounter.push(wordCount);

				if ($t.is(":contains('" + textField[wordCounter] + "')")) {
					return true;
				} else {
					return false;
				}

			}).show();
});