JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<script src="https://www.tga.gov.au/sites/all/themes/tga_theme/js/jquery.highlight.min.js"></script>
<link rel="stylesheet" href="https://www.tga.gov.au/sites/all/themes/tga_theme/css/styles.css">
<p>From April 2016 we will be <a href="/node/711423">updating some medicine ingredient names</a> used in Australia to align with names used internationally.</p>
<p>The list below shows the medicine ingredient names that will be changing. This list is split into:</p>
<ul>
    <li><a href="#active">Active ingredients</a>, including adrenaline and noradrenaline, changes that will require dual labelling, hydration changes, and other significant and minor changes</li>
    <li><a href="#excipient">Excipient ingredients</a></li>
</ul>
<p>We are providing this list now so that those affected can begin to <a href="/node/711423#working">prepare for the changes</a>.</p>
<dl class="qa">
    <dt>How to use this list</dt>
    <dd>
        <p>To search the Active ingredients changes table, start typing what you are looking for into the filter field below. You can also sort the results by clicking on each table column heading, to make navigating the results easier.</p>
        <p>To reset the filter, simply delete your search terms from the filter field.</p>
    </dd>
</dl>
<h2 id="active">Active ingredient changes</h2>
<label for="filter-field">Filter the table: </label>
<input id="filter-field" placeholder="Search" type="text">
<table id="filterItem" class="datatable">
    <thead>
        <tr>
            <th scope="col">Old name</th>
            <th scope="col">New name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="nohide">
            <th colspan="2" class="thlevel2" id="adrenaline-noradrenaline">Adrenaline and noradrenaline</th>
        </tr>
        <tr>
            <td>Adrenaline</td>
            <td>adrenaline (epinephrine)*</td>
        </tr>
        <tr>
            <td>Adrenaline acid tartrate</td>
            <td>adrenaline (epinephrine) acid...

JavaScript

// Global functions

var currentEntries = $('#filterItem tbody tr:visible').not('tr.nohide').not('tr.noResultsRow').length;

var noResultRow = '<tr class="noResultRow"><td>No results found in this category</td></tr>';

function entryCount() {

    var currentEntries = $('#filterItem tbody tr:visible').not('tr.nohide').not('tr.noResultRow').length;

    if (currentEntries === 0) {
        $('#filterResult').html('No entries found');
    } else if (currentEntries === 1) {
        $('#filterResult').html('<strong>1</strong> entry found');
    } else {
        $('#filterResult').html('<strong>' + currentEntries + '</strong> entries found');
    }
}

entryCount();

// onLoad
$(function() {
    /*
    	$('#filterItem').tablesorter({
    		headers: {
    			1: {
    				sorter: false
    			}
    		}
    	});
    */

    // Get number of entries
    var entries = $('#filterItem > tbody > tr').not('tr.nohide').length

    // Add results counter, checking if it already exists first
    if (!$('#filterResult').length) {
        $("#filter-field").after('<p id="filterResult"><strong>' + entries + '</strong> entries listed</p>');
    }

    // Grab substance name with which to generate unique row ID
    $('#filterItem tr').not('tr.nohide').each(function() {
        var $this = $(this),
            $fCell = $(this).children('td:first'),
            $fCellVal = $fCell.text(),
            // make everything lowercase, then remove non-alphabetical characters with 
            $fCellValClean = $fCellVal.toLowerCase().replace(/[^a-z\s]/gi, '').replace(/\s+/g, '-');

        $this.attr('id', $fCellValClean);
    });
});

// Credit to Nrodic: http://stackoverflow.com/questions/17074687/filtering-table-rows-using-jquery

// This makes ':contains' case insensitive. Thanks Chris :)
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function(elem) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});


// Detect all changes to the...