Filter Data from Table

by Zuhaib Siddiqui

HTML

<input id="search" placeholder="search" />
<table>
    <tr>
        <th colspan="4">California</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>Company</td>
        <td>Link</td>
        <td>Notes</td>
    </tr>
    <tr data-state="california">
        <td>Joe Smith</td>
        <td>Acme</td>
        <td>www.www.com</td>
        <td>n/a</td>
    </tr>
    <tr data-state="california">
        <td>Sue Smith</td>
        <td>Acme</td>
        <td>www.www.com</td>
        <td>n/a</td>
    </tr>
    <tr data-state="california">
        <td>Frank Jones</td>
        <td>Etc</td>
        <td>www.www.com</td>
        <td>n/a</td>
    </tr>
    <tr>
        <th colspan="4">Alaska</th>
    </tr>
    <tr data-state="alaska">
        <td>Sue Henderson</td>
        <td>Acme</td>
        <td>www.com.com</td>
        <td>n/a</td>
    </tr>
    <tr data-state="alaska">
        <td>Jimmy Dean</td>
        <td>Acme</td>
        <td>www.com.com</td>
        <td>n/a</td>
    </tr>
</table>

CSS

td {
    padding: 10px;
    border: 1px solid black;
}
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

JavaScript

$("input#search").keyup(function () {
    var filter = $(this).val();
    var regExPattern = "gi";
    var regEx = new RegExp(filter, regExPattern);
    $("table tr").each(function () {
        if($(this).data('state'))
        if (
        $(this).text().search(new RegExp(filter, "i")) < 0
        && $(this).data('state').search(regEx) < 0
        ){
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});