0
103
ViewsSearch with id mechanism in javascript
I have a problem implementing search feature in my project. I have html like:
Html:
<input type="text" id="search">
<video src="smth.mp4" id="firstvid">
<video src="smth2.mp4" id="secondvid">
<video src="smth3.mp4" id="thirdvid">
The js I tried:
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";
}
I know it is dumb.
All i want is that when user types id of a video in search bar, let's say firstvid, only firstvid should appear while all other videos should disappear. Is it possible with js? I searched a lot but could not find any example.
By appearing and disappearing, I meant that the search bar is on top of page and the videos are under it just like youtube. So when id of a video is searched all other videos should hide.
Thanks in advance :)
1 answers
Answer question0
I have solved the issue in the sense. When user types in the input field. If the input field value matches with the id of the video tag then it will set the display property of the video tag from none to block
<!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>
You can just copy paste and run to see. Attached screenshot
Like the above