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.

Talk Python's Mastodon Michael Kennedy's Mastodon