Filtro de una lista con HTML, CSS, JavaScript

1. Cat
2. Dog
3. Elephant
4. Fish
5. Gorilla
6. Monkey
7. Turtle
8. Whale
9. Aligator
10. Donkey
11. Horse

---

Filtrar una lista

Muchas veces tenemos la necesidad de filtrar una lista extensa o un índice para encontrar el resultado rápidamente

Este es el objetivo de esta entrada, dejo el código de ejemplo de cómo crear ese filtro

lo vamos a hacer en 3 partes, como sabéis el JavaScript hace con que la pagina sea más dinámica e interactiva

Los lenguajes utilizados son el HTML, CSS y JavaScript

El HTML

El HTML del ejemplo es simplemente una lista, puede ser la lista de un índice, una lista de objetos, usuarios, clientes, productos etc.

...

Código del HTML

El HTML apenas está constituido por una lista ul

Código de ejemplo

        <ol id='list'>
        <li class="animals">Cat</li>
        <li class="animals">Dog</li>
        <li class="animals">Elephant</li>
        <li class="animals">Fish</li>
        <li class="animals">Gorilla</li>
        <li class="animals">Monkey</li>
        <li class="animals">Turtle</li>
        <li class="animals">Whale</li>
        <li class="animals">Aligator</li>
        <li class="animals">Donkey</li>
        <li class="animals">Horse</li>
    </ol> 
    

---

El CSS

El CSS son los estilos de la lista y del buscador, le podemos poner los estilos a nuestro gusto

Codigo de ejemplo

            #searchbar {
                margin-left: 15%;
                padding: 15px;
                border-radius: 10px;
            }
        
            input[type=text] {
                width: 30%;
                -webkit-transition: width 0.15s ease-in-out;
                transition: width 0.15s ease-in-out;
            }
        
            /* When the input field gets focus,
                change its width to 100% */
            input[type=text]:focus {
                width: 70%;
            }
        
            #list {
                font-size: 1.5em;
                margin-left: 90px;
            }
        
            .animals {
                display: list-item;
            }    
        

No hay que olvidar que los estilos se ponen en la cabecera entre las etiquetas style o en una hoja externa, siendo llamados desde la cabecera

Si quieres saber cómo se llaman externamente los estilos mira el curso HTML

---

El JavaScript

Si deseas consultar el curso JavaScript

El código JavaScript, sirve para hacer la busca dinámicamente, apareciendo solo los resultados buscados en el momento

Codigo de ejemplo

// Codigo JavaScript
function search_animal() {
    let input = document.getElementById('searchbar').value
    input = input.toLowerCase();
    let x = document.getElementsByClassName('animals');
    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display = "none";
        }
        else {
            x[i].style.display = "list-item";
        }
    }
}
        

Ir al indice

---