+ 1

Javascript search bar

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>

18th Apr 2020, 3:01 PM
David
David - avatar
6 Answers
+ 2
not at all. i wish i have more time to record a more detailed explanations to you. keep up đŸ’Ș
19th Apr 2020, 3:45 PM
Gordon
Gordon - avatar
+ 8
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>
18th Apr 2020, 3:24 PM
Gordon
Gordon - avatar
+ 2
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
19th Apr 2020, 5:57 AM
Gordon
Gordon - avatar
+ 2
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.
20th Apr 2020, 2:31 PM
Gordon
Gordon - avatar
0
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>
18th Apr 2020, 5:11 PM
David
David - avatar
0
Thank you for replying again, Gordon. It works now. Appreciate your help.
19th Apr 2020, 1:15 PM
David
David - avatar