JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" autocomplete = "off" />
<table id="table">
    <tr>
        <th>Product</th>
        <th>Supplier</th>
        <th>Price</th>
        <th>InStock</th>
    </tr>    
    <tr>
        <td>MacBook Air</td>
        <td>Apple</td>
        <td>$456</td>
        <td>85</td>            
    </tr>
    <tr>
        <td>Arc GIS</td>
        <td>ESRI</td>
        <td>$4556</td>
        <td>15</td>                        
    </tr>
    <tr>
        <td>3ds Max</td>
        <td>Auro Desk</td>
        <td>$6556</td>
        <td>359</td>                        
    </tr>
    <tr>
        <td>Windows 7</td>
        <td>Micorsoft</td>
        <td>$256</td>
        <td>2567</td>                        
    </tr>        
</table>
<div id="message"></div>

CSS

table tr {
    display: none;
}
table tr:first-child {
    display: table-row;
}

JavaScript

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase().trim(), column = 0, i, j,
        message = document.getElementById('message'),
        pattern = new RegExp(term, 'gi');
    
    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            //if(j == column && td[j].innerHTML.toLowerCase() == term){
            if(j == column && term.length > 0 && td[j].innerHTML.match(pattern)){    
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};