Filtrare una lista in Javascript

Partendo da una classica lista HTML, vogliamo filtrarla scrivendo dentro ad una input text.

Possiamo farlo in Javascript in maniera abbastanza semplice.

Partiamo dall'HTML:

    <input type="text" id="search" onkeyup="filter();">
    <br><br>
    <ul id="lista_schede">
        <li><strong>VOCE 1</strong></li>
        <li><strong>VOCE 2</strong></li>
        <li><strong>VOCE 3</strong></li>
        <li><strong>VOCE 4</strong></li>
    </ul>

Come vedete nulla di trascendentale.

Questa la funzione richiamata dall'evento onkeyup:

function filter() {
    var input = document.getElementById('search');
    var filter = input.value.toUpperCase();
    var ul = document.getElementById('lista_schede');
    var li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("strong")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Il paragone lo facciamo sempre usando il toUpperCase, in modo da non dover impostare il minuscolo / maiuscolo in fase di scrittura.

Per il resto, a seconda di quello che viene trovato o meno, viene impostata al volo una regola CSS per noascondere / mostrare le voci.

Enjoy!