Поиск фильтра <ul>

У меня есть список пользователей:

<ul>
<li class="thumb selectable arrow light" style="margin-bottom:-5px;"
data-image="http://cdn.tapquo.com/lungo/icon-144.png">
<strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
<small class="description">Hi!</small> 
</li>
...
</ul>

то, что я хочу, является текстовым вводом каждый раз, когда вы пишете письмо, чтобы отображать только пользователей, которые начинаются с этой буквы, или что они могут иметь имя. Как я могу это сделать? Это с jquery, но не как...

Ответы

Ответ 1

Вот input, который фильтрует <ul> на основе значения в чистом JavaScript. Он работает, обрабатывая onkeyup, а затем получая <li> и сравнивая их внутренний элемент .name с текстом фильтра.

jsFiddle

enter image description here

var input = document.getElementById('input');
input.onkeyup = function () {
    var filter = input.value.toUpperCase();
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        var name = lis[i].getElementsByClassName('name')[0].innerHTML;
        if (name.toUpperCase().indexOf(filter) == 0) 
            lis[i].style.display = 'list-item';
        else
            lis[i].style.display = 'none';
    }
}