HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: HTML input controls for search
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here's our search results and our ability to do search, well kind of non existent over on
0:05
this page, isn't it? Let's go and add the HTML in here necessary to
0:10
make this thing go. So what we're gonna do is we're gonna have two divs
0:14
We're gonna have a div here and another div here.
0:17
This one is going to be the inputs and this one is going to be the
0:20
results. On the input side, we want to have this have a class search-inputs
0:27
and you know, maybe down here class search-results like so.
0:33
All right, super. So and here we want an input of type="text"
0:37
All this are is going to have to have a name and the name has to
0:42
exactly match what we're looking for over in search.
0:47
We're looking for search_text. So that is exactly what the name there has to
0:53
be. Let's also give people some help with a placeholder, so they can type whatever
0:59
they want. And if it's blank as they search for a video and as they start
1:02
to type the police holder of course will go away.
1:05
Let's say this has a class form-control.
1:08
I think that might be enough for us to get started.
1:11
Let's find out. It seems like it thinks something is missing.
1:15
We don't care if it has a label,
1:16
it has a placeholder. Look at that, Search for a video...
1:20
And then let's also in this section put a header Search videos,
1:25
video collector. That's the name of our little site.
1:31
Here we go. Search video collector.
1:32
Search for a video, and then we're gonna need to do something fun with the results
1:37
down here. All right, so let's go over here.
1:40
This also needs another class I realized, videos and search-results, and let's give it
1:45
an id, because when we do the actual search,
1:48
we want to say, where did the results go?
1:51
They're going to go into the thing with id
1:53
search-results. That's the one and only thing, how's things looking? Alright.
1:57
Nothing super impressive yet. But we're about there.
2:00
So, we're gonna go and add our content into this section when we get them
2:05
back from the server. If this was a normal form thing,
2:09
we'd go and we'd put this into a form,
2:11
right? This would be in a form.
2:13
The form would have a submit button,
2:15
but we're doing active search. All we want them to do is type and we want
2:19
htmx to take it from there.
2:20
So I'm not gonna worry about adding the form and then taking away the form. We're just going to leave it like this because this is all we need.