JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<body>
    <form id="live-search" action="" class="styled" method="post">
        <fieldset>
            <input type="text" class="text-input" id="filter" value="" /> <span id="filter-count"></span>

        </fieldset>
    </form>
    <div class="tags">
        <label>
            <input type="checkbox" rel="A" />A</label>
        <label>
            <input type="checkbox" rel="B" />B</label>
        <label>
            <input type="checkbox" rel="C" />C</label>
    </div>
    <ul class='studentList'>
        <li class="A">
            <div class='img'></div>
            <div class='name'>peter A</div>
        </li>
        <li class='B'>
            <div class='img'></div>
            <div class='name'>cloe B</div>
        </li>
        <li class='C'>
            <div class='img'></div>
            <div class='name'>aaron C</div>
        </li>
        <li class='A'>
            <div class='img'></div>
            <div class='name'>phil A</div>
        </li>
        <li class='C'>
            <div class='img'></div>
            <div class='name'>mark V</div>
        </li>
        <li class='C'>
            <div class='img'></div>
            <div class='name'>peet C</div>
        </li>
        <li class='B'>
            <div class='img'></div>
            <div class='name'>mike B</div>
        </li>
        <li class='A'>
            <div class='img'></div>
            <div class='name'>bob A</div>
        </li>
        <li class='A'>
            <div class='img'></div>
            <div class='name'>alicia A</div>
        </li>
        <li class='B'>
            <div class='img'></div>
            <div class='name'>mitch B</div>
        </li>
    </ul>
</body>

CSS

li {
 	    float: left;
 	    border: 1px solid gray;
 	    padding: 5px;
 	    list-style-type: none;
 	}
 	.img {
 	    background: #fff url("http://www.unk.edu/_files/images/portrait_icon.jpg") no-repeat 0px 0px;
 	    width: 160px;
 	    height: 160px;
 	}
 	.name {
 	}

JavaScript

$(document).ready(function () {
    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("li").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut(0).addClass('hidden');

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show().removeClass('hidden');
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {
        
        if($('div.tags').find('input:checkbox:checked').length > 0){
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).not('.hidden').show();
        });
        } else {
            $('.studentList > li').not('.hidden').show();
        }
    });
});