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:06
this page, isn't it? Let's go and add the HTML in here necessary to make this thing go. So what we're gonna do is we're gonna have two divs
0:15
We're gonna have a div here and another div here. This one is going to be the inputs and this one is going to be the
0:21
results. On the input side, we want to have this have a class search-inputs and you know, maybe down here class search-results like so.
0:34
All right, super. So and here we want an input of type="text" All this are is going to have to have a name and the name has to
0:43
exactly match what we're looking for over in search. We're looking for search_text. So that is exactly what the name there has to
0:54
be. Let's also give people some help with a placeholder, so they can type whatever
1:00
they want. And if it's blank as they search for a video and as they start to type the police holder of course will go away.
1:06
Let's say this has a class form-control. I think that might be enough for us to get started.
1:12
Let's find out. It seems like it thinks something is missing. We don't care if it has a label,
1:17
it has a placeholder. Look at that, Search for a video... And then let's also in this section put a header Search videos,
1:26
video collector. That's the name of our little site. Here we go. Search video collector.
1:33
Search for a video, and then we're gonna need to do something fun with the results down here. All right, so let's go over here.
1:41
This also needs another class I realized, videos and search-results, and let's give it an id, because when we do the actual search,
1:49
we want to say, where did the results go? They're going to go into the thing with id
1:54
search-results. That's the one and only thing, how's things looking? Alright. Nothing super impressive yet. But we're about there.
2:01
So, we're gonna go and add our content into this section when we get them back from the server. If this was a normal form thing,
2:10
we'd go and we'd put this into a form, right? This would be in a form. The form would have a submit button,
2:16
but we're doing active search. All we want them to do is type and we want htmx to take it from there.
2:21
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.