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:04
That is not just search functionality but search functionality that happens dynamically as we type,
0:11
I want to give you a sense of where we're going.
0:13
So here's a screenshot of the finished feature and notice that we're searching here for indycar
0:21
and as we type, the results are refining themselves and coming down at the bottom
0:26
So here are two results that are coming in.
0:29
So we're going to hook up htmx to notice when we type up here and
0:34
then when typing happens, we're going to do a search on the server,
0:38
use a partial Jinja template to render out this result at the bottom.
0:44
Now this is pretty straightforward. A lot of sites have search like this, but we're
0:47
going to do two additional things that make this both much nicer for a user and
0:53
in general makes it better for SEO and sharing. Notice up here,
0:57
search=indycar, what is this?
1:01
This is both browser history. So if I search for indycar, then racing and then
1:07
Romain Grosjean, those would all appear up here in my history, and I could go
1:12
forwards, backwards, and it would work just like they were real static HTML pages.
1:18
Not some kind of AJAX magic that we're doing.
1:21
So that history is amazing. But also, I could copy this,
1:25
give it to someone else. They could click it, and it will pull up exactly
1:29
the same view. That's called deep linking.
1:32
So instead of just going to the app, and then you've got to like drive the
1:36
app and get it to build up its data to come to life in a way
1:40
that you might want to share,
1:41
but you can't actually do that because if you give a link to it,
1:44
like it's not in the right state and all that kind of stuff,
1:47
very, very common with SPAs,
1:49
we're going to create the ability to deep link in here,
1:51
so share that link, give it to anyone, post it on the internet,
1:54
they will get the same view.
1:56
Amazing. All with htmx and incredibly simple.