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.