LoPS test

by timmah

HTML

<script src="https://www.tga-test.launchpad.agileware.com.au/sites/all/themes/tga_theme/js/tablesorter/jquery.tablesorter.min.js"></script>
<script src="https://www.tga-test.launchpad.agileware.com.au/sites/all/themes/tga_theme/js/jquery.highlight.min.js"></script>
<p class="callout keywords">Demo only, words to be determined</p>
<p>Based on the <a href="http://www.health.gov.au/internet/main/publishing.nsf/Content/ocs-treaties-compliance-prohibited-impexp-precursor.htm">Department's list</a>.</p>
<label for="filter-field">Filter the table:</label>
<input id="filter-field" placeholder="Search" type="text">
<table id="lps-table" class="datatable" summary="Table displays Prohibited Imports and Exports (Drugs and Precursor Chemicals)">
    <thead>
        <tr>
            <th scope="col">Substance Name</th>
            <th scope="col">Synonym/Description</th>
            <th scope="col">Classification</th>
            <th scope="col">Import Permit Required</th>
            <th scope="col">Import Licence Required</th>
            <th scope="col">Export Licence and Permit Required</th>
            <th scope="col">Alternate Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Abortifacients</td>
            <td>that is substances that purport to produce abortion</td>
            <td>&nbsp;</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
            <td>TGA</td>
        </tr>
        <tr>
            <td scope="row">Acetic anhydride</td>
            <td>in solutions, mixtures containing at least 90%</td>
            <td>Precursor</td>
            <td>No</td>
            <td>No</td>
            <td>Yes*</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td scope="row">Acetone</td>
            <td>neat and in mixtures at a concentration of a least 90%</td>
            <td>Precursor</td>
            <td>No</td>
            <td>No</td>
            <td>Yes*</td>
           ...

CSS

.highlight {
    background-color:red;
}

JavaScript

(function ($) {
    // Credit to Nrodic: http://stackoverflow.com/questions/17074687/filtering-table-rows-using-jquery

    $("#filter-field").keyup(function () {
        //split the current value of searchInput
        var data = this.value.split(" ");

        $('#lps-table td').unhighlight();
        $('#lps-table td').highlight($('#filter-field').val());

        //create a jquery object of the rows
        var jo = $("#lps-table > tbody").find("tr");
        if (this.value == "") {
            jo.show();
            return;
        }

        jo.val().toLowerCase();

        //hide all the rows
        jo.hide();

        //Recusively filter the jquery object to get results.
        jo.filter(function (i, v) {
            var $t = $(this),
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":contains('" + data[d] + "')")) {
                    console.log('hit');
                    return true;
                }
            }
            return false;
        })
        //show the rows that match.
        .show();

    });
})(jQuery);