HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Intro to search as you type
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
In the previous lesson I showed you how to use the HXGet attribute to dynamically replace the contents of a tag using HTMX.
0:09
In this lesson I'll be covering how to build an interactive page with Search As You Type. This image shows the desired outcome.
0:19
A page with an input for search and some results. As the user types in the search field, the results are added dynamically.
0:28
There's also something a little subtle going on here. Notice that the URL has a query parameter
0:33
with the desired search term as well. The goal is for the URL to get updated as you enter a new
0:40
search term. There's a couple reasons to do this. First, it allows deep linking. You could copy the
0:47
URL, send it to a friend, and they'll see the same results you're looking at. The second is browser
0:53
history. By modifying the URL on the fly, you can now take advantage of the back button.
0:58
Search for electric cars, search for IndyCars, then press back and you'll see the electric car
1:05
search again. This is something that single page applications often make impossible or
1:11
require the programmer to jump through hoops to achieve. To build this feature, the first step
1:17
I'll take is to create a view and template for the page. I'll start by hardcoding the search results,
1:23
ignoring what's in the search field, and just make sure the structure of the page works and
1:28
that I've got the query right for searching on text terms. Once the base is in place,
1:34
it's time to start wiring the HTMX. The search field needs to be changed to respond to the user's
1:41
input, and as a search goes to the server, the results need to come back as a partial.
1:46
In the previous lesson, I used multiple views to cover each step here.
1:50
This time around, I'll show you an alternate approach where you can do it all in the same view.
1:55
HTMX sets a header when it makes a call, so you can differentiate vanilla browser calls from an
2:03
HTMX one. You can check for this header explicitly, but there is a handy third-party library called
2:09
DjangoHTMX which provides a bunch of utilities. One of these is some middleware that sticks a
2:15
a data object in the request which has HMX-related info on it. I'll be using that inside the view to check if this is an HTMX call.
2:25
Once I've got the page working and results showing up dynamically, then I'll go back and add the URL updating feature.