search params to url; closes #12

arthur-schnitzler · May 30, 2024 · ba956b6 · ba956b6
1 parent 88f94d4
commit ba956b6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/html/js/search.js b/html/js/search.js
@@ -22,6 +22,10 @@ const searchClient = typesenseInstantsearchAdapter.searchClient;
 const search = instantsearch({
     searchClient,
     indexName: project_collection_name,
+    routing: {
+        router: instantsearch.routers.history(),
+        stateMapping: instantsearch.stateMappings.simple(),
+      },
 });
 
 search.addWidgets([

diff --git a/templates/partials/nav.j2 b/templates/partials/nav.j2
@@ -1,14 +1,15 @@
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <a class="navbar-brand" href="index.html">
-      <img src="img/project-logo.svg"  alt="Schnitzler-Mikrofilme Logo">
+      <img src="img/project-logo.svg" alt="Schnitzler-Mikrofilme Logo">
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-      <li class="nav-item dropdown">
+        <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Info
           </a>
@@ -22,10 +23,13 @@
         <li class="nav-item">
           <a class="nav-link" href="browse.html">Blättern</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" href="search.html">Suchen</a>
-        </li>
-
+      </ul>
+      <ul class="navbar-nav me-2 mb-2 mb-lg-0">
+        <form class="d-flex" role="search" method="GET" action="search.html">
+          <input class="form-control me-2" type="search" placeholder="Suchbegriff eingeben" aria-label="Suchen"
+            name="Schnitzler-Mikrofilme[query]">
+          <button class="btn btn-outline-success" type="submit">Suchen</button>
+        </form>
       </ul>
     </div>
   </div>