JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="taaksearch">
    <form>                            
        <input type="text" class="searchfield" placeholder="Zoek een taak......" value="" />
        <button class="button green small">zoeken<span>Arrow</span></button>
    </form>
</div>
<div class="taakcontent">
    <ul class="listitems">
        <li class="title cf">
            <div class="title_left">Taakomschrijving</div>
            <div class="titlSave
e_right">Moment van regelen</div>
        </li>

            <li class="red"><a href="">
                <h1>Step: Vul enquete in</h1>
                <span>Uiterlijk 22 augustus 2012</span>
                <p></p></a>
            </li>
        
            <li class="red"><a href="">
                <h1>Step: maak enquete op</h1>
                <span>Uiterlijk 22 augustus 2012</span>
                <p></p>
            </li>
        
    </ul>
</div>

JavaScript

(function ($) {
    jQuery.expr[':'].Contains = function(a,i,m){
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };

    function listFilter(header, list) {

        $('.searchfield').on('change', function () {
                var filter = $(this).val();
                if(filter) {
                    $(list).find("li:not(:Contains(" + filter + "))").hide();
                    $(list).find("li:Contains(" + filter + ")").show();
                } else {
                    $(list).find("li").show();
                }
                return false;
            })
            .keyup( function () {
                $(this).change();
            });
    }

    $(function () {
        listFilter($(".listitems"));
    });
}(jQuery));