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?
0:04 Well incredibly less than actually everything you even see on screen here.
0:08 Not even this much. So we have three attributes that were required to basically do
0:14 the search. We have hx-get to get the search results.
0:18 We have a trigger keyup changed after a delay.
0:22 So remember keyup as long as the contents have changed, and they've stopped typing for 250
0:28 milliseconds or more. And then a place to put the results.
0:31 We had a div named with an id search-results.
0:35 So we say hx-target="#search_results".
0:38 We added two more things here.
0:40 We had hx-push-url="true" for browser history.
0:44 And then in this part we also had to set the value to support deep linking
0:49 because it would be weird to load the page up,
0:51 see the results but have an empty text box.
0:54 So we would reload the text box with the search text as well.
0:58 That's it. That's all it takes to basically do the work of active search with
1:03 htmx. We still have to do the server side stuff and then render
1:06 the results somehow. But again,
1:08 that was slightly different. Right? That's whatever lives at the end of hx-get.