Client-Side Filter

jQuery

HTML

<input id="filterBox"/>

<ul>
    <li class="hideable hideable2">
        <div>
            <div class="searchable">AAA search this text</div>
            <div>BBB non-searchable text</div>
        </div>
    </li>
    <li class="hideable">
        <div class="searchable">CCC search this text</div>
        <div>DDD non-searchable text</div>
    </li>
    <li class="hideable">
        <div class="searchable">EEE search this text</div>
        <div>FFF non-searchable text</div>
    </li>
    <li class="hideable">
        <div class="searchable">GGG search this text</div>
        <div>HHH non-searchable text</div>
    </li>
    <li class="hideable">
        <div class="searchable">III search this text</div>
        <div>JJJ non-searchable text</div>
    </li>
</ul>

JavaScript

/*filter = $("#filterBox");

searchables = $(".searchable");
hideables = $(".hideable");

filter.keyup(function(){
    results = '';
    userString = filter.val();
    userString = userString.toLowerCase();
    hideables.show();
    searchables.each(function(){
        guts = this.innerText;
        guts = guts.toLowerCase();
        if (guts.indexOf(userString) < 0){
            $(this).closest('.hideable').hide();
        }
    })
})

*/


function closest(el, className){
    var par = el.parentNode;
    if(!par) return null;
    
    var classes = par.className.split(' ');
    for(var i in classes){
        if(classes[i] == className) return par;
    }

    return closest(par, className);
};

var d = document,
    filter = d.getElementById('filterBox');
    searchables = d.getElementsByClassName('searchable');

filter.onkeyup = function(){
    for(var i=0; i<searchables.length; i++){
        var searchable = searchables[i],
            guts = searchable.innerText.toLowerCase(),
            userString = filter.value.toLowerCase(),
            hideable = closest(searchable, 'hideable');
        if(hideable){
            if(guts.indexOf(userString) < 0){
                hideable.style.display = 'none';
            } else {
                hideable.style.display = 'list-item';
            }
        }
        
    }
};