add functional elements of search

Author: nerdEd

_includes/tutorial_navigation.html

@@ -11,8 +11,17 @@
     {% endfor %}
    </ul>
 
-  <div class="menu" data-toggle="#menu-list">
-    <div class="hamburger-icon"> &#9776</div>
-    <div class="menu-title">Chapter {{page.number}} -- {{ page.title }}</div>
+  <div class="menu-container">
+    <div class="menu" data-toggle="#menu-list">
+      <div class="hamburger-icon"> &#9776</div>
+      <div class="menu-title">Chapter {{page.number}} -- {{ page.title }}</div>
+    </div>
+
+    <div class="search">
+      <form action="/rails_tutorial/search" method="get" target="_self">
+        <input type="text" id="search-box" name="query">
+      </form>
+    </div>
   </div>
+
 </div>

_scss/tutorial/tutorial_nav.scss

@@ -13,11 +13,16 @@
     text-decoration: none;
   }
 
+  .menu-container {
+    display: table;
+    width: 100%;
+  }
+
   .menu {
     font-size: 1.4em;
     cursor: pointer;
-    display: table;
-    width: 100%;
+    display: table-cell;
+    width: 75%;
     height: $nav-bar-height;
   }
 
@@ -31,6 +36,7 @@
   .menu-title {
     display: table-cell;
     vertical-align: middle;
+    width: 75%;
   }
 
   ul {
@@ -52,6 +58,17 @@
     height: 100%;
     width: 0%;
   }
+
+  .search {
+    display: table-cell;
+    vertical-align: middle;
+    width: 25%;
+
+    input {
+      height: 25px;
+      width: 200px;
+    }
+  }
 }
 
 @media (min-width: 480px) {

js/lunr.min.js

@@ -0,0 +1,58 @@
+(function() {
+  function displaySearchResults(results, store) {
+    var searchResults = document.getElementById('search-results');
+
+    if (results.length) { // Are there any results?
+      var appendString = '';
+
+      for (var i = 0; i < results.length; i++) {  // Iterate over the results
+        var item = store[results[i].ref];
+        appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
+      }
+
+      searchResults.innerHTML = appendString;
+    } else {
+      searchResults.innerHTML = '<li>No results found</li>';
+    }
+  }
+
+  function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=');
+
+      if (pair[0] === variable) {
+        return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+      }
+    }
+  }
+
+  var searchTerm = getQueryVariable('query');
+
+  if (searchTerm) {
+    document.getElementById('search-box').setAttribute("value", searchTerm);
+
+    // Initalize lunr with the fields it will be searching on. I've given title
+    // a boost of 10 to indicate matches on this field are more important.
+    var idx = lunr(function () {
+      this.field('id');
+      this.field('title');
+      this.field('content');
+    });
+
+    for (var key in window.store) { // Add the data to lunr
+      idx.add({
+        'id': key,
+        'title': window.store[key].title,
+        'author': window.store[key].author,
+        'category': window.store[key].category,
+        'content': window.store[key].content
+      });
+
+      var results = idx.search(searchTerm); // Get lunr to perform a search
+      displaySearchResults(results, window.store); // We'll write this in the next section
+    }
+  }
+})();

js/search.js

@@ -0,0 +1,23 @@
+---
+layout: rails_tutorial
+title: Search
+permalink: /search/
+---
+
+
+<ul id="search-results"></ul>
+
+<script>
+  window.store = {
+    {% for chapter in site.chapters %}
+      "{{ chapter.url | slugify }}": {
+        "title": "{{ chapter.title | xml_escape }}",
+        "content": {{ chapter.content | strip_html | strip_newlines | jsonify }},
+        "url": "{{ site.baseurl | append: chapter.url | xml_escape }}"
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endfor %}
+  };
+</script>
+<script src="{{ site.baseurl }}/js/lunr.min.js"></script>
+<script src="{{ site.baseurl }}/js/search.js"></script>