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
Hx.target, 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.