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.