#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
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
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();
How would I do this with the use of JSON data from an API
Thank you very much, your explanation helped me for a school assignment.
Helped me a ton !
Great job !!
What is the difference between the Filter search and Predictive search feature ?
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
@@DoctorCode9 so they are almost the same?
how to hide the list?only shows when you input the same letter
finally a solution that worked for me, thank you so much
how do you add hyperlink?
How can I do this by using an object array instead of a ul list?
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
doctor code You’re not using a button? Isn’t it a live search?
if I wanted to add a delay in the search filter, what should I do? Thanks
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();
I'm in love with your channel :) thx for sharing
I'm glad that you like our content, and I will try my best to improve my video's quality 😊
@@DoctorCode9 thank you for your videos
legend.
how can we hide those lists before searching
good job ma bro
i luv u so much , you're a my hero
ur best
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
👍🏻👍🏻👍🏻......
Amazing stuff,thank you so much
First, I need to hide the below list. then i want to search
Please create video on Advanced search with javascript
1:13
you are awsome , hope you complete your lessons of how to make website :] #learn_English_in_on_comment
In my computer, it didn't work.. Why?
you've done something wrong!
@@justinoneill2837 what is that? Please help me to find that
There aren't problems in typed codes