Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:7Length:44 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 User Searches

Now that the basic API and Vue functionality is complete, you will discover in this lesson that it takes very little extra effort to allow your users to search for movies.

Useful Links

2.4 User Searches

Now that we've got our basic functionality working, where we're pulling in these movie posters and displaying them on the screen, it won't take that much extra effort to make our search field work. We've already created this function called searchMovies, where we're passing in a key word. Now all we need to do is create a click event for our go button up here that will run that searchMovies function. And will pass into that function whatever value has been typed into our search field here. So you can find the URL for our starting pen here in your course notes. I'm gonna click on Fork to create a new copy of it. And all the changes we make in this lesson will be saved in this new copy. So I'm gonna scroll down to the very bottom here and I'm gonna create a new click event for our button. Now, if we go into our HTML, we can see that our button is called btnMovieSearch, and our text field is called txtMovieSearch. So we're gonna grab the ID for our button name, copy it, and here we're gonna point to that button and create an onclick event. So .on, and then inside parentheses, inside quotation marks, click, comma space function, open and closed parentheses, open and closed curly brackets. And there we go. So inside this function, I want to look at our text field. And if it's not empty, then I wanna perform a search. If it is empty, we're just going to ignore the click. So we need to point to this text field a couple of times. So I'm going to store it in a variable called $txt. And it has a very similar name to our button, so I'm just gonna paste our button name again and just get rid of the btn and then replace it with txt. And now we have the name of our text field, and it's stored in this variable now. So we've created that variable, now I wanna check the value of that variable to make sure that it's not blank, and if it's not blank, then we will perform the search. So we're gonna say if ($txt.val(), which is how we check the value in jQuery, if that value is not equal to an empty string. So we'll just put opening and closing quotation marks there. Then we wanna perform the search. We're gonna call this searchMovies function. So I'm just gonna highlight and copy this searchMovies function call here and paste it here. Except instead of Ghostbusters, we're gonna be passing in whatever value is stored in that text field. So $txt.val() and since this searchMovies function is doing everything we need to perform that search, it should work for us. So let's save our changes. And then I'm gonna click on Run, and we should see the screen refresh. And once it's done refreshing, we'll go into our text field here, and I'm gonna do a search for Top Gun. I don't know why I'm searching for 80s movies today, but there we go. We'll click on Go, and sure enough, we have our movies show up here in our search results. And so once again, since we've already done all the heavy lifting in this searchMovies function that we created earlier, it didn't take much extra effort at all to make our search field functional. So thank you for watching and I'll see you in the next lesson.

Back to the top