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.