+ 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>
6 Answers
+ 2
not at all.
i wish i have more time to record a more detailed explanations to you.
keep up đȘ
+ 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>
+ 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
+ 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.
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>
0
Thank you for replying again, Gordon. It works now. Appreciate your help.