JSFiddle - React, Tailwind, and code Playground

by imran44

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="sidebar">
        <!--<form action=" " method="POST" autocomplete="off" onclick="myFunction()">-->
   
            <div>Name</div>
            <div class="row" id="id_row">
                <input type="text" 
                       name="Name" 
                       id="Name" 
                       maxlength="255"
                       class="form-control mb-3" 
                       placeholder="Name" 
                       id="id_Name"
                       required="" autocomplete="off">
            </div>
            <div>
                <input type="button" 
                       value="Apply" 
                       id="btn_submit" 
                       style=" width:72px;
                    height:34px;" 
                       class="btn btn-success btn">
                <input type="reset" 
                       value="Reset" 
                       id="btn_reset" 
                       style=" width:72px;
                   height:34px;" 
                       class="btn btn-success btn">
            </div>
        <!--</form>-->
    </div>

    <table>
        <thead>
        <th> Country</th>
        <th> Region</th>
        <th> name</th>
        </thead>
        <tbody id="myTable">
        <tr>
            <td>US</td>
            <td>Northamerica</td>
            <td>Dell</td>
        </tr>
        <tr>
            <td>AE</td>
            <td>Dubai</td>
            <td>HP</td>
        </tr>
        <tr>
            <td>EG</td>
            <td>Cairo</td>
            <td>Lenovo</td>
        </tr>
        <tr>
            <td>UK</td>
            <td>London</td>
            <td>IBM</td>
        </tr>
        </tbody>
    </table>
</div>

CSS

.hide {
  display: none;
}

JavaScript

$(document).ready(function(){
  $("#Name").on("keyup", function() {
    search('#Name');
  });
  
  $("#btn_submit").on("click", function() {
    search('#Name');
  });
  
  $("#btn_reset").on("click", function() {
    $("#Name").val('');
    search('#Name');
  });
});

function search(input){
  var value = $(input).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
}