JSFiddle - React, Tailwind, and code Playground

by jpark7ca

HTML

<input type="text" id="form-lookup" placeholder="Enter your form number" />

<table class="table">
    <thead>
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th class="active" scope="col">Number</th><th scope="col">File(s)</th><th scope="col">Title</th><th scope="col">Notes</th><th scope="col">Last Updated</th>
        </tr>
    </thead>
<tbody>
				<tr>
					<td>
                    <a href="detailedform.aspx?uid=275&amp;listname=CACD Forms">details</a>
                </td><td>
                    <i class="icon-eye-open"> </i>
                </td><td>ADR-01</td><td>
                    <ul><li><a href="http://staging.cacd.circ9.dcn/forms/Lists/CACD Forms/Attachments/275/ADR-01.pdf">ADR-01.pdf</a></li></ul>
                </td><td>Request: ADR Procedure Selection</td><td>
                    <a href="detailedform.aspx?uid=275&amp;listname=CACD Forms">See instructions</a>
                </td><td>01/12</td>
				</tr><tr>
					<td>
                    <a href="detailedform.aspx?uid=276&amp;listname=CACD Forms">details</a>
                </td><td>
                    <i class="icon-eye-open"> </i>
                </td><td>ADR-02</td><td>
                    <ul><li><a href="http://staging.cacd.circ9.dcn/forms/Lists/CACD Forms/Attachments/276/ADR-02.pdf">ADR-02.pdf</a></li></ul>
                </td><td>Stipulation Regarding Selection of Panel Mediator</td><td>
                    <a href="detailedform.aspx?uid=276&amp;listname=CACD Forms">See instructions</a>
                </td><td>01/12</td>
				</tr><tr>
					<td>
                    <a href="detailedform.aspx?uid=277&amp;listname=CACD Forms">details</a>
                </td><td>
                    <i class="icon-eye-open"> </i>
                </td><td>ADR-03</td><td>
                    <ul><li><a href="http://staging.cacd.circ9.dcn/forms/Lists/CACD Forms/Attachments/277/ADR-03.pdf">ADR-03.pdf</a></li></ul>
                </td><td>Mediation Report</td><td>
              ...

JavaScript

$('#form-lookup').keyup(function() {
    var $rows = $('.table tr');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).find("td:eq(2), td:eq(4)").text().replace(/\s+/g, ' ').toLowerCase();
        
        return !~text.indexOf(val);
    }).hide();
});