actually render the search results as clickable

1 files changed, 21 insertions, 6 deletions

diff --git a/templates/searchresults.html b/templates/searchresults.html
index 38a4c9a..4afb6f7 100644
--- a/templates/searchresults.html
+++ b/templates/searchresults.html
@@ -6,13 +6,15 @@
 </div>
 
 <div id="search_noquery">
-  <p>Enter a few words to the box above to start the search.</p>
+  <p>Enter a few words into the box above to start the search.</p>
+  <p>You may use <code>*</code> for wildcard search, and prefixes <code>+</code> for required terms and <code>-</code> for unwanted terms.</p>
+  <p><strong>Example:</strong> <code>laboratory noteb* +red -code</code> will find information about <em>laboratory notebooks</em> that must also describe something <em>red</em>, but do not contain any mention of <em>code</em>.</p>
 </div>
 
 <div id="search_success" style="display: none">
   <h1>Search results</h1>
-  <div id="search_results">
-  </div>
+  <ul id="search_results" class="search-results">
+  </ul>
 </div>
 
 <div id="search_fail" style="display: none">
@@ -74,9 +76,20 @@
         break;
       }
 
-      const r=results[ri]
-      var out = document.createElement("p")
-      out.appendChild(document.createTextNode(window.search_metadata[r.ref].title))
+      const r = results[ri]
+      const m = window.search_metadata[r.ref]
+      var out = document.createElement("li")
+      var a = document.createElement("a")
+      a.className = "search-result"
+      a.appendChild(document.createTextNode(m.title))
+      a.href = r.ref
+      out.appendChild(a)
+      for(var ti=0; ti<m.tags.length; ++ti) {
+        t = document.createElement("div")
+        t.className = "search-tag"
+        t.appendChild(document.createTextNode(m.tags[ti].join(" » ")));
+        out.appendChild(t);
+      }
       el_results.appendChild(out)
     }
 
@@ -98,6 +111,8 @@
     window.history.pushState("", "",
       window.location.pathname + '?search_query='+encodeURIComponent(ev.target.value)
     )
+    // This reinstalls the listener only _after_ the original event is done,
+    // preventing infinite events and CPU boils if a cat steps on the keyboard.
     el_query.addEventListener('input', handle_search_input)
   }