Build An Audio AI App Transcripts
Chapter: Feature 2: Search
Lecture: Adding Search View
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now let's plug this search concept using HTMX into the UI. So we saw, we go over here and we type, nothing happens, right?
0:12
So what we wanna do is make that thing come to life. And in order to do that, we're gonna use HTMX, which means we need a server side endpoint
0:20
to get the search results in the form of HTML back to them. So we'll do an @router.get on a function,
0:29
we'll set the URL in a second, we'll say async def, search HX results, and it's gonna get a request and search text, which is a string.
0:42
And for the URL, let's say /search/HX. Now for this, we saw what we could do before. Let's just say, go over here and in our templates
0:54
under search, now I like to organize these so I have the whole pages here, but then just little tiny pieces under what I'm calling partials.
1:04
That really is just the stuff coming back from HTMX, so let's call this partials and I'll say search results. Now again, we're gonna need to use
1:16
our FastAPI Chameleon template, and this will be search, partials, search results. And let's just see if we can get it to echo
1:27
the search text back, okay? So we'll say search text here is search text, and in our little HTML, we'll just say you searched for,
1:40
obviously we'll put some nicely designed things in here in just a second, but let's just make sure it's hanging together, right?
1:49
The next thing we're gonna need to do is go and HTMX-ify this thing. give it a trigger and a behavior and where to put the results, all those things.