added highlighting to search results

pandrews · May 6, 2016 · 92f347d · 92f347d
1 parent 64f7b0f
commit 92f347d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -25,14 +25,30 @@ <h3 class="masthead-title">
         </div>
       </div>
 
-      <div class="container content">
+      <div class="container content" id="main">
         {{ content }}
       </div>
     </div>
 
     <label for="sidebar-checkbox" class="sidebar-toggle"></label>
 
     <script>
+
+    // Highlight search Query
+    var url = window.location.href;
+      if (url.lastIndexOf("?q=") > 0) {
+        // get the index of the parameter, add three (to account for length)
+        var stringloc = url.lastIndexOf("?q=") + 3;
+        // get the substring (query) and decode
+        var searchquery = decodeURIComponent(url.substr(stringloc));
+        // regex matches at beginning of line, end of line or word boundary, useful for poetry
+        var regex = new RegExp("(?:^|\\b)(" + searchquery + ")(?:$|\\b)", "gim");
+        // get, add mark and then set content
+        var content = document.getElementById("main").innerHTML;
+        document.getElementById("main").innerHTML = content.replace(regex, "<mark>$1</mark>");
+      }
+
+    // Toggle sidebar  
       (function(document) {
         var toggle = document.querySelector('.sidebar-toggle');
         var sidebar = document.querySelector('#sidebar');

diff --git a/public/css/ed.css b/public/css/ed.css
@@ -94,7 +94,7 @@ body {
 /* links */
 
 a, .post-title a {
-  color: #aa3311;
+  color: #841212;
   text-decoration: none;
 }
 
@@ -197,6 +197,13 @@ abbr[title] {
   border-bottom: 1px dotted #e5e5e5;
 }
 
+/* Search Highlihting */
+
+mark {
+    color: white;
+    background-color: #841212;
+}
+
 /* Quotes */
 
 blockquote {
@@ -293,7 +300,7 @@ tbody tr:nth-child(odd) th {
   line-height: 1.5rem;
 }
 .masthead-title a {
-	color: #aa3311;
+	color: #841212;
 }
 
 .masthead-title small {

diff --git a/public/js/search.js b/public/js/search.js
@@ -37,22 +37,42 @@ var store = [{% for text in site.texts %}{
 }
 {% unless forloop.last %},{% endunless %}{% endfor %}]
 
-//Query 
+//Query
+
+var qd = {}; //Gets values from the URL
+location.search.substr(1).split("&").forEach(function(item) {
+    var s = item.split("="),
+        k = s[0],
+        v = s[1] && decodeURIComponent(s[1]);
+    (k in qd) ? qd[k].push(v) : qd[k] = [v]
+});
+
+function doSearch() {
+  var resultdiv = $('#results');
+  var query = $('input#search').val();
 
-$(document).ready(function() {
-  $('input#search').on('keyup', function () {
-	var resultdiv = $('#results');
-	var query = $(this).val();
-
   //The search is then launched on the index built with Lunr
   var result = index.search(query);
   resultdiv.empty();
-  resultdiv.append('<p class="">Found '+result.length+' result(s)</p>');
+  if (result.length == 0) {
+    resultdiv.append('<p class="">No results found.</p>');
+  } else if (result.length == 1) {
+    resultdiv.append('<p class="">Found '+result.length+' result</p>');
+  } else {
+    resultdiv.append('<p class="">Found '+result.length+' results</p>');
+  }
   //Loop through, match, and add results
   for (var item in result) {
-	var ref = result[item].ref;
-    var searchitem = '<div class="result"><p><a href="{{ site.baseurl }}'+store[ref].link+'">'+store[ref].title+'</a> by '+store[ref].author+'</p></div>';
+    var ref = result[item].ref;
+    var searchitem = '<div class="result"><p><a href="{{ site.baseurl }}'+store[ref].link+'?q='+query+'">'+store[ref].title+'</a></p></div>';
     resultdiv.append(searchitem);
-   }
-  });
+  }
+}
+
+$(document).ready(function() {
+  if (qd.q) {
+    $('input#search').val(qd.q[0]);
+    doSearch();
+  }
+  $('input#search').on('keyup', doSearch);
 });