Chapter: Feature 2: Active search
Lecture: HTML input controls for search
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.