HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Creating the search page template

Login or purchase this course to watch this video and the rest of the course contents.
0:00 I'm going to need a new page for searching. Let's start by creating the template.
0:05 Nothing too fancy here. A title, an input, and an include for something I haven't written yet.
0:19 This include is for the results. I've done it this way in anticipation of the fact that I'll
0:26 be wanting to load these results dynamically using htmx. Let's create the partial for the results
0:33 right now. A lot of this is similar to the category or feed pages. In fact, a better
0:44 developer would put these little bits into a common file and reuse them through includes.
0:49 If you happen to come across a better developer, send them my way. I've got a whole to-do list they could help me with.
0:58 The first chunk here displays the number of videos in the results.
1:02 I've wrapped it in an if clause so that zero results doesn't display when the page first loads. The second chunk is a for loop over the video results.
1:16 Each row displaying the video's thumbnail, and a title and an author, both of which being clickable, taking you to the player.
1:30 If you haven't come across the Humanize library before, it ships with Django and has some tags and filters that make numbers more readable.
1:38 I'm using the int comma filter, which adds thousands separators to an integer, which in North America would be commas,
1:46 but the library is location aware and will use periods as is appropriate. This particular filter is being applied to the view count of the video.
1:57 One last bit of HTML to change. It'd be good to have a link to our search page. So I'll open up base HTML and add a link in the nav bar.
2:06 Let me just scroll down to the nav bar here. And the code I've pasted does a URL route lookup for the view I'll be writing in a
2:24 second. It also uses Font Awesome to show a little magnifying glass icon. Speaking of that view, let's go write it.

Talk Python's Mastodon Michael Kennedy's Mastodon