#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Searching movies event
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's turn our attention back to this search here. So far we just have at the top something that says initial value.
0:07
Well we could like something a little bit better than that. We would like maybe a placeholder where we can type here
0:13
that says "search for movie" and then as we type and hit enter we generate a list by searching our remote service eventually
0:20
and we have that searching our remote service for these values and then displaying them there. So first thing to do, let's go over here
0:27
and have just this initial value be nothing. That way when we set a placeholder in the HTML we'll have something meaningful there
0:34
so we can say things like placeholder equals search. Search for a movie by keywords. Now if we refresh it, you can see this.
0:42
We can make it look a little bit better if we set the class to be form-control. We got it looking a little bit better.
0:50
Not 100%. Let's put this into another bit here. Let's have a div. That's controls. This is some of the pre-baked HTML. There we go.
1:00
That lines it up with these a little bit better. So we've got our controls here. We're going to add some other things
1:05
like combo boxes and buttons and so on but let's just focus on this. We have our placeholder which goes away as you type.
1:12
And we're going to be able to use that to hook when somebody types and then presses enter to actually do the search.
1:18
So we've already seen that there's a view model taking care of whatever is in that value is exactly equal to what is displayed in this input.
1:26
So what's left? Well there's a couple of things. I guess the first one is we want to know when somebody presses enter.
1:33
We could have a search button but then we'd have to know when somebody clicked the button. So we might as well just let them click enter.
1:38
Maybe not super mobile-friendly but we're going to go it for now. So what we can do is we can go back over here
1:42
and we can not just have data, we can have another section called methods. And in here we can define JavaScript functions
1:49
that are going to be called like search. This is going to be a function and it's not going to take any data. You don't have to say what the value is
1:55
because you can just grab it like so. And then we're just going to log and how are we going to get this text?
2:00
Let's say this is going to be a constant, maybe a let. So we say this.search_text. Oops, let text = this.search_text.
2:11
There we go. So now how do we tell this thing this input box that we want to capture the key down event
2:16
the enter key, not just any key, just the enter key we want to search on that? So we could say something to the effect of this.
2:22
We can come over here and say dollar key down up press, whatever you want let's go with keyup.enter. There's a couple of built-in ones here.
2:30
And we just give it the function that we want to call search. And when we press enter, it's going to call that function
2:36
and of course we have navigation back. It's going to go to here, grab the value. Actually it's going to come to this function.
2:43
It's going to call search, which will grab the text out of whatever has been synchronized there and instead of really searching for it
2:48
we're going to print it out. Hang tight with that search part. We'll be there really soon. So we come over here and say this is a test.
2:55
Write enter. What I've searched for, test. Go to two. Hit enter again. We'll just search for that. Beautiful.
3:01
So we have our searching going really well. The other thing we want to do is have a button or some mechanism for actually just pulling back
3:08
if we go to our movie service just pulling back the top 10 which is what we were faking already. And then also, showing the genres.
3:15
So let's come up with a button for the top 10 next.