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