Build An Audio AI App Transcripts
Chapter: Feature 2: Search
Lecture: Wiring Search to the UI

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Here's our search HTML. Let's make it go do interesting things with HTML. So we say hx-get equals that URL.
0:12, well, previously we had said either this or we put that somewhere else, but this one's different. We want the input box to stay here,
0:23 but we want the search results there, okay? So we're gonna go down and say, that the search results go into the thing with ID search results.
0:35 So you say this in CSS by saying hash for ID and then just the value there. Then we need a trigger. Now there's a couple of variations here.
0:46 We don't want every single keystroke to make a request back to the server. It could probably handle it, but it's not ideal, right?
0:55 It's gonna overwhelm things. So we wanna put a delay and let's say 250 milliseconds. Now, another one is,
1:03 notice how I'm changing the arrows right here. That would count as a key up. However, that wouldn't actually change the content.
1:11 So we really only wanna do this when the delay has happened, the key is up and the contents of the input box have changed so we'll say changed.
1:19 And that together is gonna give us what we want. It's gonna come over here, hit this. We'll get our search text, which let's make this optional, stir.
1:30 And we'll send it back. So it's gonna go there, pass over whatever input value is in here. And then ideally put the results,
1:45 actually replace this whole section with whatever comes back, which should just say you search for something. Let's see how it's going.
1:51 Let's go to search. I'm gonna search for HTMX. Oh, look at that folks. You search for HTMX. I'm excited. I search for geese of,
2:07 notice that not every keystroke I'm hitting, once I stop, then they come in. Geese of Canada. If I do the arrow key,
2:17 can't really see whether or not it's flickering and changing or it just has no flicker. But the fact that it's not actually changing the contents,
2:24 doesn't do anything. Geese of Canada, question mark. Okay, so it looks like we've got this really nicely hooked into our page.
2:33 Like see how amazing HTMX is? HTMX is amazing. Boom, love it, love it, love it. Create easy, easy to create really dynamic pages.
2:44 Final thing for this feature is to actually, well, two things, to run the search and then format them in an interesting way. Let's run the search next.

Talk Python's Mastodon Michael Kennedy's Mastodon