Javascript search bar

Question

Hello,
I building a website for a class project and I'm having difficulty with the javascript search bar. I would like the results to appear when you start to type. Also when you click on what you were looking for, is there a way to direct that to the page it's on. If there's a website someone can direct me to, id appreciate that too.
Here's the HTML I have for the search bar.
Thank you

HTML

<section id="search">
<div class="search-movie">
<form>
<input type="search" placeholder="Search for a movie...">
<button type="search" class="button_1">Search!</button>

</form>
</div>
</section>

Answer 1

not at all.

i wish i have more time to record a more detailed explanations to you.

keep up 💪

Answer 2

document.querySelector("input").addEventListener("input", function(e){
elements.forEach(elem=>{
if(elem.innerHTML.includes(e.value)) elem.style.display = "block";
else elem.style.display = "none";
});
}, false);

for redirection,
make the content a list of <a>

Answer 3

You need to get elements into the HTMLCollection, and convert them into an array.

For input string and innerHTML, convert them into lowercase

https://code.sololearn.com/WjLdqdNIV4Ub/?ref=app

I also made some corrections to my previous version.

Should be event.target.value

Answer 4

Here are my detailed explanations on this topics :

The basics (basically what I have done in my demo above) :

https://youtu.be/6Fn60_qZ7zQ

The advanced (One step more on the development of this search feature) :

https://youtu.be/jRZ0tX9gXqk

Watch from beginning to end, don't pause in the middle.

Ask me there if you have any questions.

Answer 5

Gordon thank you for answering. I'm still a bit of a beginner to HTML. Would it look something like this? I put the content in a list in the form tag, but it's showing on the web page.

<section id="search">
<div class="search-movie">
<form>
<input type="search" placeholder="Search for a movie...">
<button type="search" class="button_1">Search!</button>
<li><a href="Action-&-Adventure">Action & Adventure</a></li>

</form>
</div>
</section>

<script>
document.querySelector("input").addEventListener("input", function(e){
elements.forEach(elem=>{
if(elem.innerHTML.includes(e.value)) elem.style.display = "block";
else elem.style.display = "none";
});
}, false);
</script>

Answer 6

Thank you for replying again, Gordon. It works now. Appreciate your help.