diff --git a/assets/html/js/search.js b/assets/html/js/search.js
index 873673a59c..465c3a8952 100644
--- a/assets/html/js/search.js
+++ b/assets/html/js/search.js
@@ -345,7 +345,6 @@ const worker_blob = new Blob([worker_str], { type: "text/javascript" });
 const worker = new Worker(URL.createObjectURL(worker_blob));
 
 /////// SEARCH MAIN ///////
-const modal_filters = make_modal_body_filters(filters);
 
 // Whether the worker is currently handling a search. This is a boolean
 // as the worker only ever handles 1 or 0 searches at a time.
@@ -359,6 +358,9 @@ var last_search_text = "";
 // in the DOM, is used compute the results to display on calls to update_search.
 var unfiltered_results = [];
 
+// Which filter is currently selected
+var selected_filter = "";
+
 $(document).on("input", ".documenter-search-input", function (event) {
   if (!worker_is_running) {
     launch_search();
@@ -383,13 +385,13 @@ worker.onmessage = function (e) {
 };
 
 $(document).on("click", ".search-filter", function () {
-  // Toggle classes (for UI & semantics)
   if ($(this).hasClass("search-filter-selected")) {
-    $(this).removeClass("search-filter-selected");
+    selected_filter = "";
   } else {
-    $(this).addClass("search-filter-selected");
+    selected_filter = $(this).text().toLowerCase();
   }
 
+  // This updates search results and toggles classes for UI:
   update_search();
 });
 
@@ -412,6 +414,7 @@ function update_search() {
     }
 
     let search_result_container = ``;
+    let modal_filters = make_modal_body_filters();
     let search_divider = `<div class="search-divider w-100"></div>`;
 
     if (results.length) {
@@ -477,13 +480,16 @@ function update_search() {
 /**
  * Make the modal filter html
  *
- * @param {string[]} filters
  * @returns string
  */
-function make_modal_body_filters(filters) {
+function make_modal_body_filters() {
   let str = filters
     .map((val) => {
-      return `<a href="javascript:;" class="search-filter"><span>${val}</span></a>`;
+      if (selected_filter == val.toLowerCase()) {
+        return `<a href="javascript:;" class="search-filter search-filter-selected"><span>${val}</span></a>`;
+      } else {
+        return `<a href="javascript:;" class="search-filter"><span>${val}</span></a>`;
+      }
     })
     .join("");