JavaScript DOM Tutorial #16 - Custom Search Filter

Hey gang, in this JavaScript DOM tutorial I'll show you how we can create a custom JS search filter using the 'keyup' event as well as several other techniques we've learnt so far in the series.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[deveagle]

Wow, this is better than the majority of videos I buy on Udemy. With the explosion of JavaScript, and most employers wanting “Vanilla JS”, I’ve been searching for good, quality Vanilla JS videos. The topic/project here is amazing. Please post more project-based JavaScript videos like these! Your teaching style is amazing!

[aayubov]

.includes() will be little bit more concisely and semantically correct than .indexOf()
Big thx for this tutor!

[amanansari]

Thanks net ninja for giving so much back to the community with your tutorials.

[chasehudson]

You are amazing, I spent so much time trying to figure this out on my own and from other peoples code. but yours is simple and straight to the point. Thanks!

[rubitiara]

Shaun is the best of all :D He knows how to explain programming language in a human understanding way!!

[oussamatarhi]

Thanks a lot for the videos. I just want to add that in this case I prefer using 'input' event, it fires whenever the value of input changes. And I used search() method to filter the books. I think those two technique are more straightforward and more readable.

[zuber]

I became you fan after watching these dom element videos in javascript thanks alot

[codedynamics]

wow loved it, reminded me how it all works thank you dude

[HasanAYousef]

This is the code worked with me:
<form id="search-truck">
<input type="text">
</form>
<ul class="menubar" id="menuList" style="list-style: none;"></ul>


var list =


const searchBar =
searchBar.addEventListener('keyup', function(e){
const term = e.target.value.toLowerCase();
const books =

console.log("book: "+ book.textContent);
const title =
if(title.includes(term)){
book.style.display = 'block';
}
else {
book.style.display = 'none';
}
})
})

[tanvir]

What a lesson!!!! Appreciate your teaching quality.

[moriekormoh]

I loved been with u guys, you're the best.
pls can u make a series on online billing system.

[kucal]

This is a very good tips, but I got the hover type search bar and I don't know how to make it as you did for the <ul><li> tags and surely I have should be saving this for next project. Thanks

[NehaSingh-xown]

Hey Net Ninja .... You are just awesome teacher..

[lep]

Thanks! This helped me a lot with a project I’m working on

[anaragayevafr]

if(!title.includes(term)){
element.style.display = 'none';
} else {
element.style.display = 'block';
}

//I did like this and worked. Thanks for the great video

[NganNguyen-mfbr]

Can I replace the <li> tag with the <div> tag?

[lardosian]

Tutorial Series wa Subarashi deshta, arigato gozaimashita Net Ninja san!

[markreeves]

Thanks for this great project tutorial bro. I have got a lot from it. keep on bro. thanks very much

[stefaniaia]

Amazing! You are a genius! Thank you !

[anavitoriaviana]

Amazing! Thank you for making content like this