JSFiddle - React, Tailwind, and code Playground

by dschu012

HTML

<input id="searchBar" type="text" class="form-control">

    <table class="table table-hover">
        <thead>
            <tr>
                <th>Surname</th>
                <th>First name</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>Doe</td>
               <td>John</td>
           </tr>
           <tr>
               <td>Smith</td>
               <td>John</td>
           </tr>
           <tr>
               <td>Johnson</td>
               <td>Ann</td>
           </tr>
        </tbody>
    </table>

JavaScript

$('#searchBar').keyup(function(){
            var name = $(this).val();
            if(name === "") {
                $( 'tbody>tr' ).fadeIn();
            } else {
                console.log("Search for: "+name);
                $( 'tbody>tr:contains('+name+')' ).fadeIn();
                $( 'tbody>tr:not(:contains('+name+'))').fadeOut();
            }
        });