Use HTMX for search page

templates/base.html

@@ -40,6 +40,7 @@
 
 
     <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
+    <script async defer type="text/javascript" src="{% static 'contrib/htmx/htmx.min.js' %}"></script>
 
     {% block darkmode %}
       <script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>

website/search/models.py

@@ -1,7 +1,10 @@
 from django.core.paginator import EmptyPage, Paginator
 from django.http.request import HttpRequest
+from django.http.response import HttpResponse, HttpResponseBadRequest
+from django.shortcuts import render
 from django.utils.functional import cached_property
 from rest_framework import serializers
+from wagtail.contrib.routable_page.models import RoutablePageMixin, route
 from wagtail.models import Page
 from wagtail.query import PageQuerySet
 from wagtail.search.models import Query
@@ -12,7 +15,7 @@ from website.common.utils import TocEntry
 from website.home.models import HomePage
 
 
-class SearchPage(BaseContentMixin, BasePage):  # type: ignore[misc]
+class SearchPage(BaseContentMixin, RoutablePageMixin, BasePage):  # type: ignore[misc]
     max_count = 1
     subpage_types: list = []
     parent_page_types = ["home.HomePage"]
@@ -40,40 +43,49 @@ class SearchPage(BaseContentMixin, BasePage):  # type: ignore[misc]
 
     def get_context(self, request: HttpRequest) -> dict:
         context = super().get_context(request)
+        context["search_url"] = self.reverse_subpage("results")
+        return context
+
+    @route(r"^results/$")
+    def results(self, request: HttpRequest) -> HttpResponse:
+        if not request.GET.get("q", None):
+            return HttpResponse()
 
         serializer = self.SearchParamsSerializer(data=request.GET)
 
-        if serializer.is_valid():
-            search_query = serializer.validated_data["q"]
-            context["search_query"] = search_query
-            filters, query = parse_query_string(search_query)
-            Query.get(search_query).add_hit()
-            pages = self.get_search_pages().search(query)
+        if not serializer.is_valid():
+            return HttpResponseBadRequest(serializer.errors)
 
-            paginator = Paginator(pages, self.PAGE_SIZE)
-            context["paginator"] = paginator
-            page_num = serializer.validated_data["page"]
-            context["page_num"] = page_num
-            try:
-                results = paginator.page(page_num)
+        search_query = serializer.validated_data["q"]
+        page_num = serializer.validated_data["page"]
 
-                # HACK: Search results aren't a queryset, so we can't call `.specific` on it. This forces it to one as efficiently as possible
-                if not isinstance(results.object_list, PageQuerySet):
-                    results.object_list = Page.objects.filter(
-                        id__in=list(
-                            results.object_list.get_queryset().values_list(
-                                "id", flat=True
-                            )
-                        )
-                    ).specific()
-            except EmptyPage:
-                results = []
+        context = {
+            **self.get_context(request),
+            "search_query": search_query,
+            "page_num": page_num,
+        }
 
-            context["results"] = results
-        else:
-            if "q" in request.GET:
-                context["invalid_search"] = True
-            else:
-                context["initial"] = True
+        filters, query = parse_query_string(search_query)
+        Query.get(search_query).add_hit()
+        pages = self.get_search_pages().search(query)
 
-        return context
+        paginator = Paginator(pages, self.PAGE_SIZE)
+        context["paginator"] = paginator
+
+        try:
+            results = paginator.page(page_num)
+
+            # HACK: Search results aren't a queryset, so we can't call `.specific` on it. This forces it to one as efficiently as possible
+            if not isinstance(results.object_list, PageQuerySet):
+                results.object_list = Page.objects.filter(
+                    id__in=list(
+                        results.object_list.get_queryset().values_list("id", flat=True)
+                    )
+                ).specific()
+
+        except EmptyPage:
+            results = []
+
+        context["results"] = results
+
+        return render(request, "search/search_results.html", context)

website/search/templates/search/search_page.html

@@ -11,28 +11,17 @@
 {% endif %}
 
 <section class="container">
-  <form>
-    <input type="search" name="q" placeholder="Search" value="{{ search_query }}"/>
-  </form>
-</section>
-
-<section class="container">
-  {% if initial %}
-    <p>Enter search terms</p>
-  {% elif invalid_search %}
-    <p>Invalid search</p>
-  {% elif results|length == 0 %}
-    {% if page_num > paginator.num_pages %}
-      <p>There aren't {{ page_num }} page - only {{ paginator.num_pages }}.</p>
-    {% else %}
-      <p>No results</p>
-    {% endif %}
-  {% else %}
-    {% for page in results %}
-      {% include "common/listing-item.html" %}
-    {% endfor %}
-  {% endif %}
+  <input
+    type="search"
+    name="q"
+    placeholder="Search"
+    hx-get="{{ search_url }}"
+    hx-trigger="keyup changed delay:300ms, search"
+    hx-target="#search-results"
+    autocomplete="off"
+  >
 </section>
 
+<section class="container" id="search-results"></section>
 
 {% endblock %}

website/search/templates/search/search_results.html

@@ -0,0 +1,9 @@
+{% load wagtailadmin_tags %}
+
+{% for page in results %}
+  {% include "common/listing-item.html" %}
+{% endfor %}
+
+{% if results.has_next %}
+  <span hx-get="{{ search_url }}{% querystring page=results.next_page_number %}" hx-trigger="revealed" hx-swap="outerHTML"></span>
+{% endif %}