search and hilight

by Stalk

HTML

<input type="text" id="filter" placeholder="search" />
<div class="item-list">
    <ul class="views-summary">
        <li><a href="#">red apple</a></li>
        <li><a href="#">green apple</a></li>
        <li><a href="#">green grass</a></li>
        <li><a href="#">yellow sun</a></li>
        <li><a href="#">yellow grass</a></li>
        <li><a href="#">red sun</a></li>
    </ul>
</div>

CSS

.hilight {
    background-color: yellow;
}

JavaScript

jQuery.expr[":"].ContainsIgnoreCase = jQuery.expr.createPseudo(function (arg) {
    return function (elem) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$('#filter').on('keyup', function () {
    var elem = $(this)
    var text = elem.val()
    var list = $('ul.views-summary')

    if (text.length < 2) {
        list.find('li:hilight').removeClass('hilight')
    } else {
        list.find('li').removeClass('hilight')
        list.find("li a:ContainsIgnoreCase('" + text + "')").parent().addClass('hilight')
    }
})