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,
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.