added functionality:

- previously openend accordion tab now stays open when results change
- all occurrences of the search string in results are now marked, now just the first one
- and occurrence marking now honors user's choice whether to match case

the_works/static/js/search_all.js

@@ -1,14 +1,34 @@
 /*
  * SEARCH-ALL FUNCTIONS
  */
+function initSearchall(url) {
+  let searchField = document.getElementById("search_all");
+  // add event listener to search field
+  searchField.addEventListener("input", event => search_all(searchField.value, url));
+  // add event listener to case-matching checkbox
+  document.getElementById("match_case").addEventListener("change", event => search_all(searchField.value, url));
+}
+
+
 function search_all(s, url) {
-  // remove previous results
+  // remember open result table 
+  let lastOpened = document.querySelector("#results>details[open]");
+  lastOpened = lastOpened ? lastOpened.id : null;
+
+  // clear results
   document.getElementById("results").innerHTML = "";
+  
+  // return on empty search string
   if ( s == "" ) { return; }
 
+  // build regex that matches search string occurrences
+  let match_case = document.getElementById("match_case").checked;
+  let match_s = new RegExp(`(${s})`, match_case ? "g" : "ig");
+console.dir(match_s);
+
   // fetch search results
   let fetch_url = new URL(url);
-  fetch_url.search = new URLSearchParams({query: s, case: document.getElementById("match_case").checked ? "match" : "no"});
+  fetch_url.search = new URLSearchParams({query: s, case: match_case ? "match" : "no"});
 
   fetch(fetch_url)
   .then(response => response.json())
@@ -57,24 +77,28 @@ function search_all(s, url) {
             continue;
           }
           td = document.createElement("td");
-          td.innerHTML = row[column] ? row[column].toString().replace(s, `<mark>${s}</mark>`) : "";
+          td.innerHTML = row[column] ? row[column].toString().replace(match_s, "<mark>$1</mark>") : "";
           tr.appendChild(td);
         }
         tbody.appendChild(tr);
       }
       table.appendChild(tbody);
       heading.innerHTML = `<h3>${db_table} (${tbody.childNodes.length} Treffer)</h3>`;
+      container.setAttribute("id", `details-${db_table.toLowerCase()}`);
 
       // add container element to DOM
       container.append(table);
       document.getElementById("results").appendChild(container);
-
-      // open <details> but only if it's the first element
-      if ( document.getElementById("results").children[0] == container ) {
-        container.setAttribute("open", "open"); 
-      } 
       document.getElementById("results").insertBefore(document.createElement("hr"), container);
     }
+
+    // open container that was previously opened, or first one
+    let containers = document.querySelectorAll("#results>details");
+    if ( containers.length ) {
+      let container_ids = [...containers].map(c => c.id);
+      let openIndex = container_ids.includes(lastOpened) ? container_ids.indexOf(lastOpened) : 0;
+      containers[openIndex].setAttribute("open", "open");
+    } 
   })
 }