HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on htmx.org
Lecture: Example: Active search

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Our next demo that we want to look at,
0:01 our example, is "Active Search". So if we come over here,
0:05 let's just see it in action.
0:06 Then we'll talk about the code.
0:09 So what we want to do is we want to search by email for a bunch
0:12 of users and notice there's no users in our table here and also keep your eye
0:17 right here. As we do the search,
0:19 you'll see some active indicator type thing.
0:22 So let's suppose we're going to find all the educational users in our database.
0:26 We can just search for .edu and then look at that, there they
0:30 are. Now, one thing you might have noticed,
0:33 I typed that pretty fast but let me try it again.
0:36 If I type e-d-u, notice it didn't really refresh until I stopped typing.
0:41 You don't want this to just power through so that every keystroke you type goes to a server.
0:45 It kind of waits until you pause, and then it'll search.
0:48 How about the organizations, the org.
0:51 There we go. We've got Owen and Walker and Klein,
0:55 all of these dot org domains.
0:57 What about the dot coms? There we go.
1:00 Really cool, right? let's see what it takes to do this. Over here
1:04 we have our search indicator, that's that little spinning active bar that says searching.
1:10 This is the text box I was typing in.
1:13 It has form-controll class, but it's actually not in a form.
1:16 That's just a bootstrap style. Here's the relevant section, for doing a POST to /search.
1:23 The trigger is on keyup when the data has changed and the user has stopped
1:28 typing for half a second or 500 milliseconds.
1:31 That's why it didn't bounce around as I was typing it, it waited till I stopped.
1:35 Then it's going to replace #search-results,
1:38 which is down here in this body.
1:41 We had First Name, Last Name,
1:42 Email, and in our table, and then it was filled up with the results
1:46 as they came back. And then, finally,
1:49 while it's thinking, this is the CSS selector that its going to show and then hide.
1:56 That is up here. The dot means `class`.
2:00 So class htmx-indicator, and it just shows that span and these bars.
2:06 That's the entire implementation other than, at the server side, when we give it some bit
2:11 of data, it has to actually do the search.
2:13 Let's look at our history here.
2:15 So the initial state is basically what we talked through, when we do this POST on /search,
2:19 notice its {"search": "value"} and the name of this input is search.
2:24 So the value to search was, I typed edu.
2:27 There's not one for "e", there's not one for "ed" just "edu" because of the delay.
2:32 Come down here, and it got these results, and it jammed them inside there.
2:38 Then we did a search for nothing.
2:40 We deleted it, and we got edu and here's our org, our org ones
2:44 we got back. On the server.
2:46 we're doing some search that generates these users, and then we're rendering a template like a
2:51 Jinja template. It's turning those into a bunch of table row, table datas, that look
2:56 like this. Pretty impressive, right?
2:59 For all that functionality, this is all that we have to write, plus the server-side
3:03 search implementation, which is also simple.
3:07 One other thing that we can do here that's not indicated is we can do an
3:11 hx-push, which we'll talk about later.
3:15 That would actually come up here and say something like um,
3:19 you know, search=edu,
3:21 search-com, search=org and put those in our browser history.
3:25 But this example doesn't actually show that.