Want To Easily Create Live Search Option For Your Web Application - Code With Mark
Lean how you can easily create live search option for your next application like a professional web developer. code link: https://www.w3schools.com/jquery/jquery_filters.asp Store : https://g2gurl.com/store-code-with-mark Gift For You: https://codewithmark.com/gift Keywords: JavaScript,tutorial,DOM,javascript dom,dom tutorial,javascript dom tutorial,js,js tutorial,js dom,js dom tutorial,document object,document object model,javascript tutorial,javascript tutorials,tutorials,js document,search filter,javascript search filter,javascript custom filter,javascript filter,javascript search,search,js search box,js search filter,js filter,jquery find class,jquery search filter,jquery search box,jquery search table,jquery filter list search,jquery search box example,javascript search box Transcription: hey what's going on guys welcome to your16th JavaScript in the Dom tutorial andin this video I'm going to show you howto create a search filter usingjavascript alright and so the app isstarting to take shape we've attached afew different events such as the deleteevent we can also hide and show thebooks we can add new books as well nowwhat I want to do is turn our attentionto this thing right here to search forthe books so that when we type somethingin for example of the Wise Man's Fearthen it filters the books and only showsthis one so how are we going to do thiswell we're going to do this by attachingan event listener to this input fieldright here and this event is going to bethe key of event and a key of event iswhen we click a key and then we releaseit that release is the key of event sowhen that event occurs what we need todo is find out the value of this inputfield for example when they click a it'sgonna be a that's the first key of eventthen it could be n that's the second keyof event so every time is one of theseevents we're listing out for that andreacting to it and we're grabbing thevalue of the current text inside thisinput field and then what we want to dois take that text and we want to compareit to each one of these titles in turnnow if that text appears anywhere in oneof these titles for example a n appearshere and it also appears here then whatwe want to do is we want to keep thosetitles in the list if it doesn't appearin one of these book titles then we wantto hide that title from the list sowe're filtering those out makes sense solet's get cracking with that the firstthing we need to do is grab a referenceto the search bar now if we inspect theelement we can see it's inside this IDright here search box this form and it'san input field of text so let's first ofall grab a reference to the form andthen find the input field within thatI'm going to create a constant first ofall and I'm going to call this searchbar and I'm going to set this equal todocuments dot forms remember we can grabthe farms in a document this way easilythen in square brackets we'll passthrough the ID of the farm we want whichsearch - books then within the scope ofthis forum I want to perform a query sowhat's a query selector and this queryis going to be for the input field sothis is going to grab us the referenceto that input search box the next thingwe want to do is attach an eventlistener to this search bar we want toattach the key of eventso we'll say search bar dot add eventlistener and the event listener we wantto add is the key of event so I'll saykey op and then we'll add a callbackfunction we'll take in the event andthen open the function now inside thisfunction what do we want to do well thefirst thing we want to do is grab thesearch term so whatever the user hasimport into this field so let's create aconstant first of all and I'm going tocall this term and I'll set it equal toe which is the event object target nowthe target element in this case is thething that's emitting the event andthat's going to be the input field righthere so that's why we want to grab thatbecause we want to grab the value ofthat input field makes sense so nowwe've grabbed the value what I want todo is perform a method on it called twolower case and that is going to turn thewhole string to lower case so forexample if I type in capitals then it'sgoing to turn that into lower casebecause I want to compare a lower casestring to a lower case string and we'regoing to convert these to lowercaselater on because if we match up this tolet's just enter wise instead if wematch up this word wise to this and theyare not going to be the same thingbecause one's in capitals and one isn'tall right so we want to make sure theboth the -~-~~-~~~-~~-~- Please watch: "Easiest & Fastest Content Management System They Didn't Tell You - Code With Mark" https://www.youtube.com/watch?v=zq5d6-B_vOU -~-~~-~~~-~~-~-
Lean how you can easily create live search option for your next application like a professional web developer. code link: https://www.w3schools.com/jquery/jquery_filters.asp Store : https://g2gurl.com/store-code-with-mark Gift For You: https://codewithmark.com/gift Keywords: JavaScript,tutorial,DOM,javascript dom,dom tutorial,javascript dom tutorial,js,js tutorial,js dom,js dom tutorial,document object,document object model,javascript tutorial,javascript tutorials,tutorials,js document,search filter,javascript search filter,javascript custom filter,javascript filter,javascript search,search,js search box,js search filter,js filter,jquery find class,jquery search filter,jquery search box,jquery search table,jquery filter list search,jquery search box example,javascript search box Transcription: hey what's going on guys welcome to your16th JavaScript in the Dom tutorial andin this video I'm going to show you howto create a search filter usingjavascript alright and so the app isstarting to take shape we've attached afew different events such as the deleteevent we can also hide and show thebooks we can add new books as well nowwhat I want to do is turn our attentionto this thing right here to search forthe books so that when we type somethingin for example of the Wise Man's Fearthen it filters the books and only showsthis one so how are we going to do thiswell we're going to do this by attachingan event listener to this input fieldright here and this event is going to bethe key of event and a key of event iswhen we click a key and then we releaseit that release is the key of event sowhen that event occurs what we need todo is find out the value of this inputfield for example when they click a it'sgonna be a that's the first key of eventthen it could be n that's the second keyof event so every time is one of theseevents we're listing out for that andreacting to it and we're grabbing thevalue of the current text inside thisinput field and then what we want to dois take that text and we want to compareit to each one of these titles in turnnow if that text appears anywhere in oneof these titles for example a n appearshere and it also appears here then whatwe want to do is we want to keep thosetitles in the list if it doesn't appearin one of these book titles then we wantto hide that title from the list sowe're filtering those out makes sense solet's get cracking with that the firstthing we need to do is grab a referenceto the search bar now if we inspect theelement we can see it's inside this IDright here search box this form and it'san input field of text so let's first ofall grab a reference to the form andthen find the input field within thatI'm going to create a constant first ofall and I'm going to call this searchbar and I'm going to set this equal todocuments dot forms remember we can grabthe farms in a document this way easilythen in square brackets we'll passthrough the ID of the farm we want whichsearch - books then within the scope ofthis forum I want to perform a query sowhat's a query selector and this queryis going to be for the input field sothis is going to grab us the referenceto that input search box the next thingwe want to do is attach an eventlistener to this search bar we want toattach the key of eventso we'll say search bar dot add eventlistener and the event listener we wantto add is the key of event so I'll saykey op and then we'll add a callbackfunction we'll take in the event andthen open the function now inside thisfunction what do we want to do well thefirst thing we want to do is grab thesearch term so whatever the user hasimport into this field so let's create aconstant first of all and I'm going tocall this term and I'll set it equal toe which is the event object target nowthe target element in this case is thething that's emitting the event andthat's going to be the input field righthere so that's why we want to grab thatbecause we want to grab the value ofthat input field makes sense so nowwe've grabbed the value what I want todo is perform a method on it called twolower case and that is going to turn thewhole string to lower case so forexample if I type in capitals then it'sgoing to turn that into lower casebecause I want to compare a lower casestring to a lower case string and we'regoing to convert these to lowercaselater on because if we match up this tolet's just enter wise instead if wematch up this word wise to this and theyare not going to be the same thingbecause one's in capitals and one isn'tall right so we want to make sure theboth the -~-~~-~~~-~~-~- Please watch: "Easiest & Fastest Content Management System They Didn't Tell You - Code With Mark" https://www.youtube.com/watch?v=zq5d6-B_vOU -~-~~-~~~-~~-~-