Implementación de la barra de búsqueda web mediante el flujo condicional de Javascript

Dada una lista de elementos y la tarea es filtrar los elementos y devolver la mejor coincidencia usando la barra de búsqueda.

Hay varios enfoques para implementar esto, pero usaremos una declaración if-else simple para implementar nuestra barra de búsqueda.

Acercarse:

Cree una carpeta llamada gfgSearchBar .
Abra la carpeta en su IDE o IDLE deseado.
Cree un archivo html llamado approachOne.html
Pegue el siguiente código en el archivo html.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <meta http-equiv="X-UA-Compatible" 
            content="ie=edge" />
    <meta author="Emmanuel Onah" />
  
    <title>
        GeeksforGeeks Search Bar 
    </title>
</head>
  
<style>
    * {
        margin: 0;
        padding: 0;
    }
  
    .container {
        box-sizing: border-box;
    }
  
    header {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
        background: #d87093;
        padding: 0.5rem 1rem;
    }
  
    h3 {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.98rem;
    }
  
    input[type='search'] {
        padding: 0.5rem 2rem 0.5rem 0.4rem;
        border-radius: 4rem;
        font-size: 0.98rem;
    }
  
    .movieCollection {
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-family: -apple-system, 
            BlinkMacSystemFont,
            'Segoe UI', Roboto, Oxygen,
            Ubuntu, Cantarell, 'Open Sans',
            'Helvetica Neue', sans-serif;
    }
  
    .movieWrapper {
        margin-top: 1.5rem;
    }
  
    img {
        width: 400px;
        height: 400px;
        display: block;
    }
</style>
  
  
<body>
    <div class="container">
        <header>
            <h3>Geeks4Geeks Search Bar</h3>
  
            <input type="search" 
                placeholder="search" id="searchBar" />
        </header>
  
        <div class="movieCollection">
            <div class="movieWrapper movieOne">
                <h4>The city gate</h4>
                <time>01.02.1999</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="The city gate" />
            </div>
  
            <div class="movieWrapper movieTwo">
                <h4>Land of scientist</h4>
                <time>01.02.2000</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="Land of scientist" />
            </div>
  
            <div class="movieWrapper movieThree">
                <h4>Hidden treasure</h4>
                <time>01.02.2010</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="Hidden treasure" />
            </div>
  
            <div class="movieWrapper movieFour">
                <h4>Beautiful city of heroes</h4>
                <time>01.02.2020</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="Beautiful city of heroes" />
            </div>
  
            <div class="movieWrapper movieFive">
                <h4>The city gate</h4>
                <time>01.02.1999</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="The city gate" />
            </div>
  
            <div class="movieWrapper movieSix">
                <h4>Land of scientist</h4>
                <time>01.02.2000</time>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190812003701/html7.png"
                    alt="Land of scientist" />
            </div>
        </div>
    </div>
  
    <script>
        document.addEventListener('DOMContentLoaded', () => {
  
            const getSearchBar = 
                document.querySelector('#searchBar');
            const getAllMovies = 
                document.querySelectorAll('.movieWrapper');
  
            getSearchBar.addEventListener('keyup', e => {
                getAllMovies.forEach(movie => {
                    if (movie.innerText.toLowerCase().includes(
                        e.target.value.toLowerCase())) {
                        movie.style.display = 'block';
                        return movie;
                    }
                    else {
                        movie.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
  
</html>

Producción:

Explicación del código dentro de la etiqueta del script:

documento.addEventListener(‘DOMContentLoaded’); Este es un evento de documento que se ejecuta o activa inmediatamente que el archivo html se carga en su navegador. Las operaciones dentro de este bloque de eventos no se ejecutan hasta que el archivo html se carga por completo en el DOM.

const getSearchBar = document.querySelector(‘#searchBar’); Simplemente obtuvimos el elemento de la barra de búsqueda y lo pasamos a la variable getSearchBar .

const getAllMovies = document.querySelectorAll(‘.movieWrapper’); Simplemente obtuvimos todas las divisiones de películas y las pasamos a la variable getAllMovies . Tenga en cuenta que getAllMovies es una lista de Nodes de elementos que se parece a un Array , no a un Array .

getSearchBar.addEventListener(): simplemente agregamos un detector de eventos keyup a la barra de búsqueda.

getAllMovies.forEach(movie => {
    if (movie.innerText.toLowerCase()
    .includes(e.target.value.toLowerCase())) {
        movie.style.display = 'block';
        return movie;
    }
    else {
        movie.style.display = 'none';
    }
});

Este bloque de código simplemente significa que los tipos de usuario en la barra de búsqueda están presentes en el contenido del texto de la película, luego diseñan el cuadro de la película para que se muestre en bloques y los devuelven todos. De lo contrario, no devuelva ningún bloque de película.

Publicación traducida automáticamente

Artículo escrito por emmanuel_onah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta