Edit in JSFiddle

$(function () {
    var toHandler = 0, $FilterTxt, lastFilter = '';
    //
    function init() {
        $FilterTxt = $('#filterText').on('keyup', KeyUpOn_FilterTxt);
        $('#resetFilter').on('click', resetFilter);
    }
    function KeyUpOn_FilterTxt() {
         if (toHandler) clearTimeout(toHandler);
         toHandler = setTimeout(doFilter, 300);
    }
    function resetFilter(e) {
        if (e) e.preventDefault();
        lastFilter = '';
        $FilterTxt.focus().val('');
        $('#list li').show().unhighlight();
        $('#resetFilter').hide();
    }
    function doFilter() {
        var _txt = $FilterTxt.val();
        if (_txt.length) {
            $('#resetFilter').show();
            if (_txt != lastFilter) {
                lastFilter = _txt;
                $('#list  li').hide().unhighlight().filter(':MyCaseInsensitiveContains(' + _txt + ')').show().highlight(_txt);
            }
        }
        else resetFilter();
    }
    //
    init();
});
  
// jQuery plugin for case insensitive text search
// Source: http://stackoverflow.com/questions/2196641/how-do-i-make-jquery-contains-case-insensitive-including-jquery-1-8
jQuery.extend($.expr[":"], {
        "MyCaseInsensitiveContains": function (elem, i, match, array) {
            return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
        }
    });

// jQuery Highlight plugin
// http://bartaz.github.io/sandbox.js/jquery.highlight.html

jQuery.extend({ highlight: function (a, b, c, d) { if (a.nodeType === 3) { var e = a.data.match(b); if (e) { var f = document.createElement(c || 'span'); f.className = d || 'highlight'; var g = a.splitText(e.index); g.splitText(e[0].length); var h = g.cloneNode(true); f.appendChild(h); g.parentNode.replaceChild(f, g); return 1 } } else if ((a.nodeType === 1 && a.childNodes) && !/(script|style)/i.test(a.tagName) && !(a.tagName === c.toUpperCase() && a.className === d)) { for (var i = 0; i < a.childNodes.length; i++) { i += jQuery.highlight(a.childNodes[i], b, c, d) } } return 0 } }); jQuery.fn.unhighlight = function (b) { var c = { className: 'highlight', element: 'span' }; jQuery.extend(c, b); return this.find(c.element + "." + c.className).each(function () { var a = this.parentNode; a.replaceChild(this.firstChild, this); a.normalize() }).end() }; jQuery.fn.highlight = function (b, c) { var d = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false }; jQuery.extend(d, c); if (b.constructor === String) { b = [b] } b = jQuery.grep(b, function (a, i) { return a != '' }); b = jQuery.map(b, function (a, i) { return a.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") }); if (b.length == 0) { return this }; var e = d.caseSensitive ? "" : "i"; var f = "(" + b.join("|") + ")"; if (d.wordsOnly) { f = "\\b" + f + "\\b" } var g = new RegExp(f, e); return this.each(function () { jQuery.highlight(this, g, d.element, d.className) }) };

<form>
    <input type="text" id="filterText" placeholder="filter"/>
    <button id="resetFilter" style="display:none">X</button>
</form>
<ul id="list">
    <li>aaAAaaa</li>
    <li>bbbbbbb</li>
    <li>ababAba</li>
    <li>adadada</li>
    <li>dddDDdd</li>
</ul>

.highlight { background-color: yellow }