From bcc9a2c2f2e376505a382d2a0ab04c55111d2430 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Tue, 2 Aug 2022 09:27:43 +0100
Subject: [PATCH] Add search results counter

---
 static/src/js/search.js                          | 10 ++++++++++
 website/search/templates/search/search_page.html |  8 ++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 static/src/js/search.js

diff --git a/static/src/js/search.js b/static/src/js/search.js
new file mode 100644
index 0000000..47965a5
--- /dev/null
+++ b/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);
+});
diff --git a/website/search/templates/search/search_page.html b/website/search/templates/search/search_page.html
index 8ede561..6c774b9 100644
--- a/website/search/templates/search/search_page.html
+++ b/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 %}