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.

Talk Python's Mastodon Michael Kennedy's Mastodon