Add search results counter

static/src/js/search.js

@@ -0,0 +1,10 @@
+window.addEventListener("load", () => {
+  const searchResults = document.getElementById("search-results");
+  const resultsCount = document.getElementById("result-count");
+
+  function handleSearchResults(event) {
+    resultsCount.textContent =
+      event.target.querySelectorAll(".listing-item").length;
+  }
+  searchResults.addEventListener("htmx:after-swap", handleSearchResults);
+});

website/search/templates/search/search_page.html

@@ -1,5 +1,7 @@
 {% extends "wagtail_base.html" %}
 
+{% load static %}
+
 {% block content %}
 
 {% include "common/hero.html" %}
@@ -33,8 +35,14 @@
       </span>
     </p>
   </div>
+
+  <p>Showing <span id="result-count">0</span> results</p>
 </section>
 
 <section class="container" id="search-results"></section>
 
 {% endblock %}
+
+{% block extra_js %}
+  <script async defer type="text/javascript" src="{% static 'js/search.js' %}"></script>
+{% endblock %}