HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Performing the server-side search

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Well, I think it's time to go ahead and perform the search.
0:03 That might sound complicated. We have all these videos, and we want to search their
0:06 title or their author or things like that. And we need to break the words apart
0:11 into small pieces and do and clauses, it could be complicated.
0:15 Luckily not so much, not so much.
0:17 We've already got a lot of this in place, and it's not really relevant on how
0:21 we do the search. So we're just gonna run it. Before we get quite that
0:25 far. One thing I would like is to go over and change our navigation over
0:30 here. We've got our stuff that goes to the right.
0:33 So here's this feed. Let's go look at this real quick. So it's this thing over
0:38 here. Remember it's slow, it takes like five seconds or so to load,
0:42 but eventually it will get a feed of those.
0:44 What I would like is to put something like that for search.
0:48 So we'll come over here and just say /search and what do we put here,
0:54 what font-Awesome thing do we put here?
0:56 I don't know. Let's go find out on font-awesome.
1:00 So if you're not familiar with font-awesome,
1:01 it's a rally great place to get all sorts of fun stylable icons. We're going
1:06 to come down here and say we want search.
1:08 You know, I think that one,
1:10 that plane one right there will be good enough.
1:13 So we just click to copy and paste that sucker right there.
1:19 If we go refresh it. Not that one.
1:24 Let's go somewhere else. There we go notice we have our search. If we click
1:27 it. Oh, it does not take us to the right place because it should
1:30 be /videos/search.
1:36 Go back and try again. Here we go
1:39 videos/search. Okay, so we've got this up here,
1:43 we want to actually perform the search if somebody supposedly added an input here and we
1:49 could submit it back, let's go and perform that search.
1:52 So we're going to start over here.
1:54 This thing is going to come to life and it knows about the search text and
1:58 all those kinds of things. It also needs to be able to pass the video
2:03 models, the actual video objects down to this search template.
2:08 So it makes a lot of sense for this thing to come along and do that
2:11 as well. So we'll say self.videos
2:14 which let's define this to be a List[Video], that's going to require some imports
2:20 isn't it? I want to make that nothing.
2:23 But if there is search text,
2:26 let's go ahead and do a search.
2:27 So we'll say self.search_text and self.search_text.strip(),
2:34 make sure there's really something there,
2:36 then we want to actually perform the.search.
2:38 So videos is going to be,
2:40 you guessed it, the video_service search.
2:46 self.search_text. That's it.
2:50 That's all we gotta do. So you can come down here and look at how
2:52 this search implementation works, but again,
2:54 we're not really using a real database,
2:56 so it's, it's not super relevant,
2:58 honestly. But let's put a breakpoint right here and run this and then do some
3:04 kind of search. All right.
3:06 Let's go to our search and the first time there should be no search text, but as
3:12 we step over. Notice what is search_text.
3:15 None. Okay, good. We'll come down here.
3:19 And off it goes. So let's go and put our
3:25 search?search_text=apple. Now,
3:28 if we step down, what is the search text?
3:31 Oh, it's Apple. Very,
3:33 very good. We're going to come down here,
3:35 run the search, step over, let's see what our vm videos are.
3:40 Look at that. We've got a bunch of videos.
3:42 We've got one about WWDC,
3:44 one about the M1, one about Apple and one about Python
3:49 developers exploring Apple. I think our searche is working,
3:52 what do you think? Really all we did was go in and check, look if
3:57 some search text comes along. Let's create a place to store the results.
4:01 Set them up for if there's no search,
4:04 it's the first time we hit the page will get an empty set of results.
4:08 And then if there is, go and just use the video service and let it do the search for us.