Quiero hacer un buscador de canciones en tiempo real para mi página
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">×</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)
}
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.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).