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

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's briefly review the concepts covered in this lesson. Adding an HX_GET attribute to an input tag causes HTMX to append the contents of the
0:11 tag as a query parameter to the URL. The HX_TRIGGER attribute specifies when the HX_GET is triggered.
0:21 Using KEY_UP causes the trigger to happen on a KEY_UP event. Adding the ""Changed"" modifier limits the event to when a keypress changes the contents
0:30 of the input. Adding the ""Delay"" modifier allows you to insert a pause, ensuring the event only fires after the time has expired.
0:41 Like in the previous lesson's ""Cancel"" form example, you used ""HXTarget"" to specify
0:46 what content is replaced by the HXGet, in this case a div which contains the search
0:53 results. You can further modify an event by applying a restriction. The restriction here
1:00 uses the target member of the event and checks if its value is longer than 1. This way, if there
1:07 is only a single character in the input tag, the HX get does not fire. Adding a HX pushUrl attribute
1:16 to a tag causes the URL associated with the tag to be updated with the new value being fetched
1:22 via hxget. In this case, that means the search URL, including the query parameter,
1:29 is pushed into the browser's URL bar. This is good practice for two reasons. It allows deep linking,
1:36 and it means the back button will work to take the user back to previous searches as if they were on a separate page.

Talk Python's Mastodon Michael Kennedy's Mastodon