HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: HTML input controls for search

Learn more about this course
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.