1

Quiero hacer un buscador de canciones en tiempo real para mi página

Luce así: Captura de la página web

El código HTML es:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/estilos.css">
    <title>oye</title>
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-warning">
        <h1 class="titulo"><img src="./img/logo.png" alt="">OYE</h1>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#barra"
          aria-controls="barra"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="barra">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link canciones" id="cargarcanciones" href="canciones.html">Canciones</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-link">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModalCenter">
                           Contacto
                        </button>
                    </li>
                    <li class="nav-link">
                        <a href="sesion.html" class="btn btn-primary btn-sm" role="button" aria-pressed="true">Inicio de Sesion</a>
                    </li>
                    <li class="nav-link">
                        <a href="registro.html" class="btn btn-primary btn-sm" role="button" aria-pressed="true">Registro</a>
                    </li>
                </ul>
            </div>
    </nav>

    <main class="container">
      <h1>CANCIONES</h1>
      <div class="form-outline">
        <input type="text" name="search" id="search" class="form-control my-2" placeholder="Buscar..."
        aria-label="Search" />
        <button class="btn btn-warning mb-2" id="boton">Buscar</button>
      </div>
      <div class="row" id="lista_musica"></div>
    </main>

    <template id="template-card">
      <div class="col-12 mb-2 col-md-4">
        <div class="card">
          <img src="" alt="" class="card-img-top">
          <div class="card-body text-center">
            <h5 class="h5 font-weight-bold">Artista: </h5>
            <p class="mb-0">Cancion:</p>
            <h6>Reproduciones: </h6>
            <audio id="music" controls="">
              <source src="">
            </audio>
          </div>
        </div>
      </div>
    </template>
   
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Contacto</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h5>[email protected]</h5><br/>
              <h5>+1 123 123123123</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

    <footer class="container-fluid py-1 bg-warning text-white">
        <div class="row">
          <div class="col text-center">
            Derechos reservados
          </div>
        </div>
      </footer>
    
    <script src="./js/buscador.js"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

[![Captura de pantalla del código HTML][2]][2]

Y mi código JavaScript tiene la siguiente estructura:

const list = document.getElementById('lista_musica')
const templateCard = document.getElementById('template-card').content
const fragment = document.createDocumentFragment()
const formulario = document.querySelector('#search')
const boton = document.querySelector('#boton')

document.addEventListener('DOMContentLoaded', () =>{
    fetchData()
})

const fetchData = async () =>{
    try {
        const res = await fetch('music.json')
        const data = await res.json()
        //console.log(data)
        pintarCards(data)
    } catch (error) {
        console.log(error)
    }
}

const pintarCards = data => {
    //console.log(data)
    data.forEach(producto => {
        //console.log(producto)
        templateCard.querySelector('p').textContent = producto.cancion
        templateCard.querySelector('h5').textContent = producto.artista
        templateCard.querySelector('img').setAttribute("src", producto.icono)
        templateCard.querySelector('source').setAttribute("src", producto.ruta)
        templateCard.querySelector('h6').textContent = producto.escuchadas
        
        const clone = templateCard.cloneNode(true)
        fragment.appendChild(clone)
    })
    lista_musica.appendChild(fragment)
}

[![Captura de pantalla del código javascript][3]][3]

He intentado hacer el buscador, pero no lo logro. Pierdo el diseño o no logro hacer el filtro. Listo ya envié el código en el formato indicado perdón es la primera vez q pregunto por este medio y no sabia. Agradeceria su apoyo en este proyecto, no conozco mucho de javascript lo he ello a punta de videos en Youtube par sacr esa parte adelante.


miren este es el codigo:

const list = document.getElementById('lista_musica')
const templateCard = document.getElementById('template-card').content
const fragment = document.createDocumentFragment()
const formulario = document.querySelector('#search')
const boton = document.querySelector('#boton')

document.addEventListener('DOMContentLoaded', () =>{
    fetchData()
})

const fetchData = async () =>{
    try {
        const res = await fetch('music.json')
        const data = await res.json()
        //console.log(data)
        pintarCards(data)
    } catch (error) {
        console.log(error)
    }
}

const pintarCards = data => {
    //console.log(data)
    data.forEach(producto => {
        //console.log(producto)
        templateCard.querySelector('p').textContent = producto.cancion
        templateCard.querySelector('h5').textContent = producto.artista
        templateCard.querySelector('img').setAttribute("src", producto.icono)
        templateCard.querySelector('source').setAttribute("src", producto.ruta)
        templateCard.querySelector('h6').textContent = producto.escuchadas
        
        const clone = templateCard.cloneNode(true)
        fragment.appendChild(clone)
    })
    lista_musica.appendChild(fragment)
}
5
  • 7
    Te recomiendo leer Cómo preguntar: no deberías poner el código con imágenes, sino como texto. Las imágenes som más complicada de leer (en un móvil el texto de las mismas es demasiado pequeño) y no podemos copiar y pegar el texto a una respuesta, haciendo la tarea de responderte innecesariamente pesada. Commented el 13 sept. 2021 a las 8:35
  • En cuanto compartas el código HTML como texto (y no como capturas de pantalla) intentaremos echarte una mano. Además, nos vendría bien saber con más detalle a qué problema te enfrentas cuando creas el buscador. Es decir, no veo por ningún lado el código que recibe el evento de cambio del texto del buscador para realizar la búsqueda y generar el HTML adecuado. Commented el 13 sept. 2021 a las 8:50
  • Te recomiendo almacenar todas tus canciones en un arreglo y luego mostrarlas utilizando un loop foreach. Commented el 13 sept. 2021 a las 10:02
  • 1
    @HernandoAbella, es justo lo que hace. Solicita los datos y los almacena en una, pero es una variable de ámbito local llamada data y, por lo tanto, no podrá acceder a ella más adelante. En cuanto comparta el código en texto y nos explique mejor qué problema tiene con el buscador podremos ayudarle. Commented el 13 sept. 2021 a las 10:12
  • Gracias, ahora solo quedaría que compartieras el contenido de music.json. Si es un archivo muy grande puedes compartir solo un fragmento. Y, por último, en el caso de que el buscador deba hacerse del lado del servidor, la tecnología de servidor que usas (node.js, python, php, jsp, asp, etc) y si es en lado del cliente, cómo has intentado hacer el buscador (el código que has probado y no te funciona). Commented el 14 sept. 2021 a las 6:11

1 respuesta 1

2

Deberías crear un método para filtrar los elementos que muestras dentro de lista_musica según el criterio que elijas.

A continuación te muestro un ejemplo de cómo puedes hacerlo, ya que no disponemos de tu código para poder aplicarlo directamente a él:

/* Datos de prueba */
let datos = [
  {
    titulo: "Súper héroes",
    contenido: "Súper López, Mortadelo y Filemón",
  }, {
    titulo: "Súper villanos",
    contenido: "El colesterol y el ministerio de igualdad",
  }, {
    titulo: "Otros más",
    contenido: "La tierra, marte, júpiter y plutón",
  },
];

/* La clase donde encapsulamos la funcionalidad */
class Discos {
  /* Almacenamos los datos proporcionados para su posterior uso */
  constructor (datos, padre, plantilla) {
    this.datos = [];
    /* Clonamos los datos junto con un nuevo elemento que será el DOM */
    datos.forEach(elemento => {
      this.datos.push({
        dom: null,
        style: null,
        elemento
      });
    });
    this.padre = padre;
    this.plantilla = plantilla;
  }
  /* Pintamos una única vez los elementos en el DOM */
  pintar() {
    this.datos.forEach(dato => {
      this.plantilla.querySelector("h3").innerText = dato.elemento.titulo;
      this.plantilla.querySelector("p").innerText = dato.elemento.contenido;
      /* Clonamos solo el contenido generado de la plantilla */
      dato.dom = this.plantilla.cloneNode(true).firstElementChild;
      /* Agregamos ese DOM al documento */
      this.padre.appendChild(dato.dom);
      /* Almacenamos el estilo para su correcta restauración */
      dato.display = dato.dom.style.display;
    });
  }
  /* Transliteramos y normalizamos la cadena antes de compararla */
  normalizar(palabra) {
    return palabra.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
  }
  /* Función de comparación de cadenas para el buscador */
  incluye(pajar, aguja) {
    return this.normalizar(pajar)
      .includes(this.normalizar(aguja));
  }
  /* Función para ocultar aquellos datos que no contengan la palabra */
  filtrar(palabra) {
    this.datos.forEach(dato => {
      /* Comprobamos si el título o contenido incluye la palabra */
      if (
        this.incluye(dato.elemento.titulo, palabra)
        || this.incluye(dato.elemento.contenido, palabra)
      ) {
        /* En caso positivo restauramos la visibilidad */
        dato.dom.style.display = dato.display;
      } else {
        /* En caso negativo ocultamos el elemento */
        dato.dom.style.display = "none";
      }
    });
  }
}

/* Creamos una instancia de nuestra clase */
const discos = new Discos(
  datos,
  listado,
  window["template-card"].content
);

/* Cuando cargue el DOM pintamos los datos */
window.addEventListener("DOMContentLoaded", () => {
  discos.pintar();
});

/* Cuando actualicemos o soltemos una tecla actualizamos los elementos mostrados */
buscador.addEventListener("keyup", (evento) => {
  discos.filtrar(evento.target.value);
});
buscador.addEventListener("change", (evento) => {
  discos.filtrar(evento.target.value);
});
.elemento {
  border-radius: 1em;
  border: 2px solid darkgreen;
  padding: 0.5em;
  width: 10em;
  margin: 0.5em;
  display: inline-block;
}
.elemento *:first-child {
  margin-top: 0px;
}
.elemento *:last-child {
  margin-bottom: 0px;
}
<p><input id="buscador" type="text" /></p>
<div id="listado"></div>
<template id="template-card">
  <div class="elemento">
    <h3></h3>
    <p></p>
  </div>
</template>

Ten en cuenta:

  • Es mejor agregar al DOM del documento el primer elemento de la plantilla clonada en vez del DocumentFragment obtenido de la clonación mediante template.cloneNode(true).firstElementChild;. De esa manera podrás guardar una referencia con la que trabajar posteriormente como si de cualquier otro elemento del DOM se tratase.
  • Cuando crees un buscador, es buena idea hacer comparaciones de cadenas normalizando el contenido de las mismas (cambiando letras acentuadas por sus equivalentes sin acentuar, convertir todo a minúsculas, etc).
3
  • disculpa en lugar de datos registrado uso el json como hago para llamara los datos. Commented el 14 sept. 2021 a las 0:31
  • disculpa tengo preguntas, que s plantilla donde encuentro eso en html, como hago si los datso son un json peor no desde hay si desde otra carpeta. Commented el 14 sept. 2021 a las 1:00
  • Una plantilla es lo que tienes con una etiqueta <template>. He usado datos estáticos para simular datos obtenidos por fetch(). En la práctica es lo mismo. Commented el 14 sept. 2021 a las 6:08

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.