Filter search for <ul>

html-lists, javascript, jquery, search, textinput

Solution

Here is a `input` that filters a `<ul>` based on the value in pure JavaScript. It works by handling the `onkeyup` and then getting the `<li>`s and comparing their inner element `.name` with the filter text.

jsFiddle

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';
    }
}

Problem

I have a list of users as well: ``` <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> ``` what I want is a text input each time you write a letter to display only users that start with that letter or that they might have the name. As I can do? It is with jquery but not as ...

Original source