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.