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 fast API 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.

Talk Python's Mastodon Michael Kennedy's Mastodon