JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" id="search-criteria" />
</div>search results:
<div id="count"></div>
<table id="search-table" class="ori_table" border="1">
    <thead>
        <tr class="header_hidden">
            <th>No.</th>
            <th>Name</th>
            <th>Address</th>
            <th>Tel</th>
            <th>Fax</th>
             <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

tr.header_hidden {
    display:none;
}
table.ori_table {
    width:100%;
    border-collapse:separate;
    border-spacing:0px;
}
div.bodywrapper {
    height:100px;
    overflow-y:auto;
}
table.ori_table tr:hover {
    background-color:#FFFF99;
}

JavaScript

$("<div>", {class: "tablewrapper"}).insertBefore($("table.ori_table"));
$("<table>", {class: "header"}).appendTo($("<div>", {class: "headerwrapper"
}).appendTo($("div.tablewrapper")));
$("table.ori_table").appendTo($("<div>", {class: "bodywrapper"}).appendTo($("div.tablewrapper")));

var chead = "table.ori_table thead";
$(chead).clone().val("").appendTo("table.header");
$("table.ori_table tbody>tr").addClass("row");
$("table.header tr").removeClass("header_hidden");
//$("table.ori_table th").wrapInner("<div class='header_hidden'></div>");

//width adjustments
$("table.header").width($("#search-table").width());
var bodyTr = $("table#search-table tr:eq(1) td");
$("table.header tr:first th").each(function (index, value) {
    $(this).width(bodyTr.eq(index).width());
});

//search function
$("#search-criteria").on("keyup", function () {
    var g = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    }).toLowerCase();
    $(".row").each(function () {
        //s is the value within tr
        var s = $(this).text().toLowerCase();
        $(this).closest('.row')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
        //testing: count number of results
        var rowCount = $('#search-table >tbody >tr').length;
        document.getElementById('count').innerHTML = rowCount;
    });
});