HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Course conclusion and review
Lecture: Active search with htmx

Login or purchase this course to watch this video and the rest of the course contents.
0:00 We saw that htmxwas fantastic for adding "Active Search".
0:04 That is search as you type.
0:06 Of course we didn't want every single keystroke to drive a search.
0:09 You want to let people type just a little bit and then basically the soon as
0:13 they stop and are ready to, it's Okay,
0:15 that's what I'm searching for. Boom!
0:16 The results pop right in. So they type here,
0:20 the results dynamically reappear here without reloading the page, but we went farther.
0:26 Remember we did a couple of things,
0:27 we actually added the search text to the
0:30 URL, so that would show up in the browser history, adding back and
0:34 forth support, you know, navigate back as well as very importantly we supported deep
0:40 linking. So if you were to bookmark that or share that URL, that
0:44 is now possible. It'll actually regenerate exactly the same view or really rerun the same
0:50 search. Maybe the data has changed.
0:51 Let's see how we did that.
0:53 It really only took four hx attributes.
0:56 We have hx-get /videos/search and then the trigger this time was an interesting
1:02 combination. It was keyup so when people are typing basically release the key but also
1:07 changed, the text has to change in the input.
1:11 It can't be enough that it's an arrow key, key up and down.
1:14 It has to be that there is a key up and the resulting value of the
1:17 input is different, and then avoiding every single keystroke hammering on the server.
1:22 We have a delay of 250 milliseconds. If you pause that long or longer that search
1:27 will be sent off to the server.
1:29 We have a target that was that bottom red block where the search results went.
1:33 It's just a CSS selector and
1:35 id=#search-results here, and then we want to have the history.
1:40 So basically the browser history side but not the deep linking side.
1:44 We said hx-push-url
1:46 is true.
1:47 One of the things we did in part of this input here also to support deep
1:51 linking was too pre-populate the input value with search text.
1:56 So we did this Jinja string,
1:58 search_text or empty string. So when you load it up the first time it's
2:02 empty., but if you deep link to it, it's gonna say grab the search text
2:07 out of the URL and then pass it back and populate this part of the page
2:11 with that text as well. Incredible,
2:13 right? This is all it takes.