HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Add HTMX attributes to the input tag

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. Now let's add the hx attributes to the input tag. You've seen two of these attributes before, hxGet and hxTarget.
0:16 When applied to an input field, hxGet is smart enough to call the URL using a query parameter.
0:23 Whatever was typed in the input box gets added to the URL. That's how the view will get the actual search text when you type.
0:33 You'll remember HXTarget from the Cancel Form example in the previous lesson. It tells HTMX where to put the results from the GET.
0:42 I'm telling it to put the results in the div with the ID ""search_results"". HXTrigger is a new idea. This tells HTMX when to take an action.
0:56 The trigger I'm interested in is typing, which in the JavaScript world is the ""keyup event.
1:03 Any of the supported JavaScript events can be used with hxtrigger. I've also got a couple of modifiers here.
1:10 You don't want the search to be refreshed if someone pressed an arrow key. You only want the search to be refreshed if the input's value has changed.
1:18 Hence the ""changed"" modifier. You also probably want a bit of a pause after the change.
1:25 If the user is typing a long string, you don't necessarily want to refresh on every keypress. The delay modifier allows you to do that pause.
1:34 Here I'm saying wait half a second after a change before triggering. Each change will reset the counter.
1:42 So HXGET only gets called if there has been more than half a second between keypresses. My love letter to HTMX continues.
1:52 This is the only thing you need to do here in the HTML.

Talk Python's Mastodon Michael Kennedy's Mastodon