JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<script src="https://raw.github.com/bartaz/sandbox.js/master/jquery.highlight.js"></script>
<div class="form">
    <div class="input-append">
        <input class="span9" id="search-box" type="text" placeholder="How to .."
        />
        <button class="btn" type="button">Go!</button>
    </div> <small>Results: <span id="filter-count"></span></small>

    <hr />
    <div class="faq-table">
        <table id="searchable" class="table table-hover table-striped ">
            <tr>
                <td>
                    <blockquote>
                        <p>What time should my bin and orange recycling bags be presented for collection?</p> <small>Wheelie bins and orange bags should be presented from 7am on your collection
                                                    day. If you are not sure what day your collection is, please contact us.</small>

                    </blockquote>
                </td>
            </tr>
            <tr>
                <td>
                    <blockquote>
                        <p>What do I do if the crews miss my bin/bags?</p> <small>If your recycling bags or wheelie bin has been presented since 7am on collection
                                                    day and has not been collected, please contact us and we will re-visit and empty/collect
                                                    them by the end of the next working day.</small>

                    </blockquote>
                </td>
            </tr>
            <tr>
                <td>
                    <blockquote>
                        <p>How do I go about arranging an Assisted Collection?</p> <small>Residents that are elderly and/or disabled and cannot present their wheelie bin/recycling
                                                    bags at the kerbside can request assistance. In such cases the bin/bag can be collected
                                                    from an agreed point, for example from the side gate, and...

CSS

span.highlight {background: yellow;}

JavaScript

// Config
var SearchBox = "#search-box";
var SearchableElements = "#searchable blockquote";
var SearchResultCount = "#filter-count";

$(SearchResultCount).text($(SearchableElements).length);

// SearchBox
$(SearchBox).keyup(function () {

    $(SearchResultCount).text("Searching ...");

    var filter = $(this).val();
    var count = 0;
    $('#searchable').unhighlight();

    $(SearchableElements).each(function () {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).parent().parent().animate({
                opacity: 0
            }, 100, function () {
                $(this).css('overflow', 'hidden').hide(100);
            });
        } else {
            $(this).parent().parent().animate({
                opacity: 1,
                height: '100%'
            }, 100, function () {
                $(this).show(100);
            });
            $('#searchable').highlight(filter);
            count++;
        }
    });

    var numberItems = count;
    $(SearchResultCount).text(count);

});