Filter Search List using JavaScript

#JavaScript
in this tutorial, we will see together how to make a cool filter search list using JavaScript.
source code for this tutorial
source code: bit.ly/2YpSt4M

[@asthapatel5109]

How would I do this with the use of JSON data from an API

[@Cristian-nk2kd]

Thank you very much, your explanation helped me for a school assignment.

[@MegaMagnax]

Helped me a ton !
Great job !!

[@baso8941]

What is the difference between the Filter search and Predictive search feature ?

[@DoctorCode9]

Predictive search is using technique like ML and AI to give accurate suggestions to user, while filter search is just filtering the results that the user have while he types

[@baso8941]

@@DoctorCode9 so they are almost the same?

[@aasaaasdeqaaalsayarahauto361]

how to hide the list?only shows when you input the same letter

[@sebastianjorgecruz9664]

finally a solution that worked for me, thank you so much

[@freshteacher5692]

how do you add hyperlink?

[@jessicadesouza3231]

How can I do this by using an object array instead of a ul list?

[@DoctorCode9]

You can create an array and everytime you add a new item using the button,you can add it to that array using push method

[@jessicadesouza3231]

doctor code You’re not using a button? Isn’t it a live search?

[@celermode6291]

if I wanted to add a delay in the search filter, what should I do? Thanks

[@justinoneill2837]

you would need to use a *debounce()* function
here's an example with a scrolling page: codepen.io/oneezy/pen/VweEwyp?editors=0011
function debounce(fn, time = 1000) {
let timeout = null;
return function() {
clearTimeout(timeout);
timeout = setTimeout( () => {
fn.apply(this,arguments)
}, time);
}
}
function scroll() {
// custom code
}
function run() {
let body = document.querySelector('body');
body.addEventListener('scroll', debounce(scroll));
}
run();

[@nouha8009]

I'm in love with your channel :) thx for sharing

[@DoctorCode9]

I'm glad that you like our content, and I will try my best to improve my video's quality 😊

[@Morvi7570]

@@DoctorCode9 thank you for your videos

[@yassinebenlahbib1058]

legend.

[@gitam-er8ri]

how can we hide those lists before searching

[@TuanBui-mx3pd]

good job ma bro
i luv u so much , you're a my hero
ur best

[@saudsayed3436]

Bro how to make search box who search whole website we able to access 7 page content on 1 page by using search box?
Plzzz plzzz tell
👍🏻👍🏻👍🏻......

[@jussymashunye]

Amazing stuff,thank you so much

[@mohithreddyvuyyuru]

First, I need to hide the below list. then i want to search

[@fippon1495]

Please create video on Advanced search with javascript

[@iLLestTv]

1:13

[@ademlabsi6048]

you are awsome , hope you complete your lessons of how to make website :] #learn_English_in_on_comment

[@wranglerxfun3692]

In my computer, it didn't work.. Why?

[@justinoneill2837]

you've done something wrong!

[@wranglerxfun3692]

@@justinoneill2837 what is that? Please help me to find that

[@wranglerxfun3692]

There aren't problems in typed codes