0
102
VistasBuscar con mecanismo de identificación en javascript
Tengo un problema al implementar la función de búsqueda en mi proyecto. tengo html como:
HTML:
<input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.mp4" id="secondvid"> <video src="smth3.mp4" id="thirdvid">El js que probé:
var inp = document.getElementById("search") var inpval = inp.value; var except = document.querySelector('video') var vidid = except.getAttribute(id) if(inpval !== vidid){ except.style.display="hide"; }else{ except.style.display="block"; } Sé que es tonto. Todo lo que quiero es que cuando el usuario escriba la identificación de un video en la barra de búsqueda, digamos firstvid , solo debería aparecer firstvid mientras que todos los demás videos deberían desaparecer. ¿Es posible con js? Busqué mucho pero no pude encontrar ningún ejemplo.
Al aparecer y desaparecer, quise decir que la barra de búsqueda está en la parte superior de la página y los videos están debajo, como en YouTube. Entonces, cuando se busca la identificación de un video, todos los demás videos deben ocultarse.
Gracias por adelantado :)
1 Respuestas
Responde la pregunta0
He resuelto el problema en el sentido. Cuando el usuario escribe en el campo de entrada. Si el valor del campo de entrada coincide con la identificación de la etiqueta de video, establecerá la propiedad de visualización de la etiqueta de video de ninguno a bloquear
<!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"> <title>Document</title> </head> <body> <input type="text" id="search" oninput="getTheValue()"> <video src="Proof.mp4" id="firstvid" style="display: none;"> </video> <video src="Proof.mp4" id="secondvid" style="display: none;"></video> <video src="Proof.mp4" id="thirdvid" style="display: none;"></video> </body> <script> function getTheValue() { var inp = document.getElementById("search") //getting input field if (inp.value == 'firstvid') { // if it is equal to first id document.getElementById('firstvid').style.display = "block"; //setting display to block } else if (inp.value == 'secondvid') { console.log("in second") document.getElementById('secondvid').style.display = "block"; } else if (inp.value == 'thirdvid') { console.log("in third") document.getElementById('thirdvid').style.display = "block"; } else { document.getElementById('firstvid').style.display = "none"; document.getElementById('secondvid').style.display = "none"; document.getElementById('thirdvid').style.display = "none"; } } </script> </html>Puedes simplemente copiar, pegar y ejecutar para ver. Captura de pantalla adjunta
como el de arriba