HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Where we're headed with active search
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Before we get into the details of implementing "Active Search".
0:05
That is not just search functionality but search functionality that happens dynamically as we type, I want to give you a sense of where we're going.
0:14
So here's a screenshot of the finished feature and notice that we're searching here for indycar
0:22
and as we type, the results are refining themselves and coming down at the bottom So here are two results that are coming in.
0:30
So we're going to hook up htmx to notice when we type up here and then when typing happens, we're going to do a search on the server,
0:39
use a partial Jinja template to render out this result at the bottom.
0:45
Now this is pretty straightforward. A lot of sites have search like this, but we're
0:48
going to do two additional things that make this both much nicer for a user and in general makes it better for SEO and sharing. Notice up here,
0:58
search=indycar, what is this? This is both browser history. So if I search for indycar, then racing and then
1:08
Romain Grosjean, those would all appear up here in my history, and I could go
1:13
forwards, backwards, and it would work just like they were real static HTML pages. Not some kind of AJAX magic that we're doing.
1:22
So that history is amazing. But also, I could copy this, give it to someone else. They could click it, and it will pull up exactly
1:30
the same view. That's called deep linking. So instead of just going to the app, and then you've got to like drive the
1:37
app and get it to build up its data to come to life in a way that you might want to share,
1:42
but you can't actually do that because if you give a link to it, like it's not in the right state and all that kind of stuff,
1:48
very, very common with SPAs, we're going to create the ability to deep link in here, so share that link, give it to anyone, post it on the internet,
1:55
they will get the same view. Amazing. All with htmx and incredibly simple.