Add search to library

Author: bnmnetp

components/rsptx/templates/book/index.html

@@ -25,16 +25,18 @@ <h2>Runestone Academy Library of Books</h2>
         the <a href="/admin/auth/my_courses">Change Course</a> page.
     </p>
 
-    <!--
     <div class="searchbar">
         <input
             type="text"
             id="searchbar"
             onkeyup="search_book()"
-            placeholder="Search by keyword..."
+            placeholder="Search by title, author, description, or book name..."
+            aria-label="Search the library"
         />
     </div>
-    -->
+    <p id="search_no_results" style="display: none">
+        No books match your search.
+    </p>
     <hr />
 
     {% for section in sections: %}
@@ -45,7 +47,10 @@ <h2>Runestone Academy Library of Books</h2>
 
         {% for book in book_list: %} 
             {% if book['shelf_section'] == section: %}
-            <div class="library_entry">
+            <div
+                class="library_entry"
+                data-search="{{ (book['title'] ~ ' ' ~ (book['authors'] or '') ~ ' ' ~ (book['description'] or '') ~ ' ' ~ book['basecourse']) | lower }}"
+            >
                 <div class="book_title">
                     <a
                         class="link1"

components/rsptx/templates/staticAssets/book/book.js

@@ -1,31 +1,47 @@
-//This is the JavaScript function of the search bar of the library
+// This is the JavaScript function of the search bar of the library.
+// A book matches when every word typed appears somewhere in the book's
+// title, author(s), description, or base course name (the `data-search`
+// attribute built in the template holds all four fields, lower-cased).
 
 function search_book() {
-    let input = document.getElementById("searchbar").value;
-    input = input.toLowerCase();
-    let x = document.getElementsByClassName("book_title");
-    let y = document.getElementsByClassName("book_descript");
+    let input = document.getElementById("searchbar").value.toLowerCase();
+    let words = input.split(/\s+/).filter((w) => w.length > 0);
 
-    for (i = 0; i < x.length; i++) {
-        if (
-            x[i].innerHTML.toLowerCase().includes(input) ||
-            y[i].innerHTML.toLowerCase().includes(input)
-        ) {
-            x[i].parentElement.style.display = "list-item";
-            x[i].parentElement.previousElementSibling.style.display =
-                "list-item";
-            y[i].parentElement.style.display = "list-item";
-            y[i].parentElement.previousElementSibling.style.display =
-                "list-item";
-        } else {
-            x[i].parentElement.style.display = "none";
-            y[i].parentElement.style.display = "none";
-        }
-    }
+    let sections = document.querySelectorAll("details");
+    let totalMatches = 0;
 
-    // remove section headings when searching - restore when the search box is empty
-    let sections = document.querySelectorAll(".sectionName");
     sections.forEach((sec) => {
-        sec.style.display = input ? "none" : "list-item";
+        let entries = sec.querySelectorAll(".library_entry");
+        let sectionMatches = 0;
+
+        entries.forEach((entry) => {
+            let haystack = entry.getAttribute("data-search") || "";
+            // Match only when every word is found somewhere in the fields.
+            let matches = words.every((w) => haystack.includes(w));
+            entry.style.display = matches ? "" : "none";
+            if (matches) {
+                sectionMatches++;
+            }
+        });
+        totalMatches += sectionMatches;
+
+        if (words.length === 0) {
+            // Empty box: restore the original collapsed sections.
+            sec.style.display = "";
+            sec.removeAttribute("open");
+        } else if (sectionMatches > 0) {
+            // Open any section that has a match, even if it was closed.
+            sec.style.display = "";
+            sec.setAttribute("open", "");
+        } else {
+            // Hide sections with no matches while searching.
+            sec.style.display = "none";
+        }
     });
+
+    let noResults = document.getElementById("search_no_results");
+    if (noResults) {
+        noResults.style.display =
+            words.length > 0 && totalMatches === 0 ? "block" : "none";
+    }
 }

components/rsptx/templates/staticAssets/index.css

@@ -84,6 +84,16 @@ input {
     outline-style: none;
 }
 
+/* The .searchbar box (border, icon, padding) is on the wrapping div; make the
+   input fill it so the placeholder isn't clipped at the input's default width. */
+.searchbar input {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: inherit;
+    border: none;
+    background: transparent;
+}
+
 .library_entry {
     margin-bottom: 5pt;
 }