HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Concept: Triggering the search with htmx
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
What did it take to trigger an active search with htmx? Well incredibly less than actually everything you even see on screen here.
0:09
Not even this much. So we have three attributes that were required to basically do the search. We have hx-get to get the search results.
0:19
We have a trigger keyup changed after a delay. So remember keyup as long as the contents have changed, and they've stopped typing for 250
0:29
milliseconds or more. And then a place to put the results. We had a div named with an id search-results. So we say hx-target="#search_results".
0:39
We added two more things here. We had hx-push-url="true" for browser history.
0:45
And then in this part we also had to set the value to support deep linking because it would be weird to load the page up,
0:52
see the results but have an empty text box. So we would reload the text box with the search text as well.
0:59
That's it. That's all it takes to basically do the work of active search with htmx. We still have to do the server side stuff and then render
1:07
the results somehow. But again, that was slightly different. Right? That's whatever lives at the end of hx-get.