HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Deep linking

Login or purchase this course to watch this video and the rest of the course contents.
0:00 I'm back inside of Search HTML. Let me start by adding that length restriction I talked about.
0:11 The square brackets here put a restriction on the keyup event, causing the trigger to
0:16 only happen if the target (that's the input tag) has a length greater than 1. Now search will only happen if you've typed at least two letters.
0:28 Next I'm going to put in code that updates the URL with the search terms.
0:39 The first thing I did was add the current search text value into the input box.
0:45 This is so if the page has been deep linked, the search field will show what was being searched.
0:51 The second thing I did was add the new htmx attribute hx_push_url. This pushes the contents of hx_get into the URL.
1:05 By setting hx_push_url to true, when the input triggers htmx, not only will the hx_get fire, but the URL will be updated as well.
1:16 That's it, one line change and you've got deep linking and the use of the back button. I believe I've already said something about love.
1:26 Gonna run the server. Go back to the search page. Type a single character. And nothing happens. Type a few more.
1:41 and not only do I have my search results, but the URL has been updated so you can deeplink.

Talk Python's Mastodon Michael Kennedy's Mastodon