HTMX + Django: 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,
0:06
let's just see it in action and we'll talk about the code. So what we want to do is we want to search by e-mail for a bunch of users.
0:14
Notice there's no users in our table here, and also keep your eye right here as we do the search, you'll see some active indicator typing.
0:23
So let's suppose we want to find all the educational users in our database. We could just search for .edu and then look at that. There they are.
0:32
Now one thing you might have noticed, I typed that pretty fast, but let me try it again. If I type edu, notice it didn't really refresh
0:40
until I stopped typing. You don't want this to just power through as every keystroke you type. There's a server, it kind of waits until you pause
0:48
and then it'll search. How about the organizations, the org? There we go. We've got Owen and Walker and Klein, all of these .org domains.
0:58
What about the .coms? There we go. Really cool, right? Let's see what it takes to do this. Over here, we have our search indicator.
1:07
That's that little spinning active bar that says searching. This is the text box I was typing in. It has form control class,
1:15
but it's actually not in a form. That's just a bootstrap style. Here's the relevant section. We're doing a post to search.
1:24
The trigger is on key up when the data has changed and the user has stopped typing for half a second or 500 milliseconds.
1:33
That's why it didn't bounce around as I was typing it. It waited till I stopped. Then it's going to replace ID search results,
1:40
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 as it came back.
1:48
And then finally, while it's thinking, This is the CSS selector that it's going to show and then hide. That is up here.
1:59
The dot means class, so class HTML 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 initial state is basically what we talked through. When we do this post on search, notice it search value,
2:23
the name of this input is search, so the value of search was I typed edu. There's not one for e, there's not one for ed, just edu 'cause 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, we wanted to delete it and we got edu,
2:43
and here's our org, our org ones we got back. So on the server, we're doing some search that generates these users,
2:50
and then we're rendering a template, like a Jinja template, that's turning those into a bunch of table row, table datas that look like this.
2:58
Pretty impressive, right? For all that functionality, this is all that we have to write, plus the server-side search implementation,
3:06
which is also simple. 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 equals edu, search equals com,
3:24
search equals org, and put those in our browser history. But this example doesn't actually show that.