JavaScript Search

[MUSIC] 0:00 Hey everyone, what's up? 0:09 I'm Dustin, a developer here at Treehouse. 0:10 Today I wanna show you how easy it really is to set up a searching feature for 0:13 your project or app. 0:17 Being able to search through your data in an application is a really good feature to 0:18 implement so that your users can see what they wanna see quicker. 0:22 Implementing this type of functionality may seem really hard and intimidating, but 0:25 it's actually pretty simple. 0:29 We just need to write a little bit of JavaScript. 0:30 In this guide, I'll show you how we can search for 0:33 a specific author in a webpage that hosts many authors. 0:35 So follow along while I'll show you how. 0:38 Make sure to check out our teachers notes or description of this video to get links 0:41 to helpful resources if you're unfamiliar with JavaScript or need a refresher. 0:45 You can also find links to our GitHub repo associated with this project, 0:49 as well as a blog post for a more detailed written version of this guide. 0:53 So if you're ready, let's get started. 0:56 If you'd like to follow along in your text editor, 0:59 make sure to go to our GitHub repo and clone the repository to your machine. 1:02 Once you're ready to get started, the first thing that we'll do is we'll 1:07 hop into our scripts folder and we'll set up a brand new JavaScript file. 1:11 I'll name this app.js. 1:15 And then I'll hop into my index.html file and just before the closing body tag, 1:17 I'll link to that new file that we just created. 1:22 I'm gonna close out of my explorer window just to give us a little bit more space. 1:31 Now, the first thing that we'll wanna do is, we wanna listen for 1:36 events when we start typing, right? 1:39 And we can grab the input element from the HTML and 1:41 notice that it has an id of author search. 1:44 So we'll grab that, and in the JavaScript we can create a variable for this. 1:47 I'll write const authorSearch= document.getElementById, 1:52 and we'll paste in that ID, which was author search. 1:57 To listen for events on this search, we can write authorSearch.addEventListener, 2:05 and the type of event we're listening for is a keyup. 2:11 And we'll take in the event, and inside of this, let's see if we can grab 2:16 the value from this search box just to see if everything's set up correctly. 2:21 We can do let currentValue= e.target.value, and 2:26 we'll do to lowercase just to make sure that everything in here is lowercase. 2:30 We can console.log this new variable, currentValue and 2:39 see if it logs in the console. 2:43 So we'll hit save, and we'll hop into our browser. 2:45 I'll right click on the page and click inspect to open up the console, I'll push 2:49 it to the bottom of the screen just so that we can still see what's going on. 2:53 I'll open up the console and then I'll begin typing in our search box. 2:57 And it looks like the console is logging everything in there. 3:02 And if we turn on Caps Lock, we'll notice that everything is still getting logged 3:06 but it's in lowercase, which is exactly what we want. 3:10 So we'll hop back into the code and we can delete this console.log. 3:14 And next we want to grab something unique from each of these cards. 3:18 And the easiest thing that I can see is the names, 3:23 the names are unique on each card. 3:26 So this will be what we wanna search for. 3:28 If we go into our HTML file, 3:30 we'll notice that each card has a card header and a card content. 3:32 And under card content, we'll see that h1 with the author's name. 3:37 So this is the element that we'll wanna grab. 3:41 And we can do this by writing, let authors equal, and 3:44 we wanna grab every iteration of this h1. 3:48 So we'll do document.querySelectorAll, and we'll do h1 with the class of title. 3:52 And how we can loop over this is by writing a forEach method. 4:02 So we can do authors.forEach, and for 4:06 each author we are going to check that the author 4:10 text content includes our current value. 4:16 So we'll write an if statement. 4:20 And if that is true we wanna show the author card, and 4:23 if it's false we wanna hide it. 4:27 So inside of our if statement, we can write if(author.textContent, 4:29 and we'll do the .toLowerCase method on this since we're doing that for 4:35 the current value, and we will write .includescurrentValue. 4:40 And if this is true, we will show the author card, else, 4:45 we'll hide the author card. 4:50 So the way that we can do that is by writing author.parentNode.parentNode. 4:52 And the reason for this is author holds our h1 tag. 4:59 So if we hop into our HTML file, 5:04 we'll notice that the parent node of this h1 tag is card content. 5:06 And the parent node of that is our author card 5:12 which is the item that we wanna hide or show. 5:15 So in this case, we'll write author.parentNode.parentNode.style.disp- 5:19 lay, and we wanna make sure this one's visible. 5:24 So we'll write block. 5:28 And in the else statement, we'll just do the opposite. 5:30 We'll write 5:33 author.parentNode.parentNode.style.display = none. 5:34 So let's hit save and let's check the browser to see if this is working. 5:41 So I'll type in James to see if the first option will show up. 5:47 James, there we go. 5:54 All the rest of the authors that don't match James disappear. 5:57 If I type Ja, Leslie Jacobs will show because her last name starts with Ja. 6:01 And James Kirby will show because his first name starts with Ja. 6:07 And if I delete that all the other authors come back. 6:12 This is exactly what we want. 6:15 You may have noticed at the beginning of this overview each card had a subtle 6:18 animation when the page loaded as well as when searching for authors. 6:22 I'll quickly go over how this was done in case this is something you're 6:26 interested in. 6:29 This requires just a little bit of CSS and a little bit of JavaScript. 6:29 So first things first, hop back into the text editor and 6:34 under styles and under scss, you'll see a base partial. 6:39 Click that, and at the bottom of the file you'll notice a keyframe, and 6:44 this is that animation. 6:48 At 0% we have the opacity set at 0 and 6:49 we translate the X-axis at negative 100 pixels. 6:52 And at 100%, we bump the opacity back up to 1 and 6:56 also translate on the x-axis back to 0 pixels. 7:00 On line 78, you'll notice this animation is actually commented out. 7:04 Because we actually use this in the JavaScript because we use 7:08 a random number for the time delay. 7:12 We just need to make sure that you add an opacity 0 in the author card. 7:15 So in the JavaScript, what you wanna do is we wanna grab every card. 7:21 So we can set that up in a variable. 7:26 We can write const authorCards=document.querySelectorAll, 7:29 and we'll target the class of author card. 7:38 I'll close my explorer window so that we can see a little bit better. 7:43 Now, what we'll do is loop over each one of these cards. 7:48 So we can do authorCards.forEach, and for 7:51 each card we basically want to set a new random value for the animation delay. 7:55 So we can do let randomAniDelay=Math.floor(Math.random 8:02 () * 500). 8:08 And we'll do this 500 value because we'll do this in milliseconds. 8:10 So we can do card.style.animation, and 8:15 we'll write backticks because we'll interpolate that random value. 8:18 And we'll just write in the fadeIn keyframe. 8:23 It'll be a one second keyframe, and we will do point and 8:27 then we'll interpolate the value seconds ease forwards. 8:32 And inside of those curly braces we'll write in our variable for 8:37 our random animation delay. 8:41 So we'll put randomAniDelay. 8:43 We'll hit save, and 8:45 when the browser reload you should see each card have that keyframe and 8:46 they all start at different times because their animation delay is different. 8:50 And their animation delay should go from anywhere from 0 to 500 milliseconds. 8:56 And that's all there is to setting up a quick subtle animation for 9:04 the author cards. 9:08 Awesome work, you should now be able to add a search feature to your projects or 9:09 apps moving forward. 9:13 The main thing to remember is that you wanna find a unique bit of data 9:15 tied to the item you're wanting to filter or search through. 9:18 I hope this guide helped and I'll see you in the next one. 9:21 Until then, have fun and happy coding 9:23

You need to sign up for Treehouse in order to set up Workspace

Sign up