display what the suggestion is and what it is enclosed by, selecting a suggestion takes the user there

Author: sethladd

lib/resources/script.js

@@ -59,7 +59,7 @@ function shiftWindow() {
 }
 
 function initSearch() {
-  var index;
+  var index;  // the JSON data
 
   function findMatches(q, cb) {
     var matches, substringRegex;
@@ -74,22 +74,44 @@ function initSearch() {
     // contains the substring `q`, add it to the `matches` array
     $.each(index, function(i, element) {
       if (substrRegex.test(element.name)) {
-        matches.push(element.name);
+        matches.push(element);
       }
     });
 
     cb(matches);
   };
 
   function initTypeahead() {
+    $('#search-box').prop('disabled', false);
+
     $('#search-box.typeahead').typeahead({
       hint: true,
       highlight: true,
       minLength: 3
     },
     {
       name: 'elements',
-      source: findMatches
+      source: findMatches,
+      display: function(element) { return element.name; },
+      templates: {
+        suggestion: function(match) {
+          return [
+            '<div>',
+              match.name,
+              ' ',
+              match.type.toLowerCase(),
+              (match.enclosedBy ? [
+              '<div class="search-from-lib">from ',
+              match.enclosedBy.name,
+              '</div>'].join('') : ''),
+            '</div>'
+          ].join('');
+        }
+      }
+    });
+
+    $('#search-box.typeahead').bind('typeahead:select', function(ev, suggestion) {
+        window.location = suggestion.href;
     });
   }
 
@@ -100,7 +122,6 @@ function initSearch() {
     initTypeahead();
   });
   jsonReq.send();
-
 }
 
 document.addEventListener("DOMContentLoaded", function() {

lib/resources/styles.css

@@ -610,6 +610,12 @@ button {
 
 /* find-as-you-type search box */
 
+/* override bootstrap defaults */
+.form-control {
+  border-radius: 0;
+  border: 0;
+}
+
 .typeahead,
 .tt-query,
 .tt-hint {
@@ -624,10 +630,6 @@ button {
   background-color: #fff;
 }
 
-.typeahead:focus {
-  border: 2px solid #0097cf;
-}
-
 .tt-query {
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -673,3 +675,8 @@ button {
 .tt-suggestion p {
   margin: 0;
 }
+
+.search-from-lib {
+  font-style: italic;
+  color: gray;
+}

lib/templates/_footer.html

@@ -1,3 +1,4 @@
+  </div> <!-- row -->
 </div> <!-- container -->
 
 <footer>

lib/templates/_head.html

@@ -39,7 +39,7 @@
             <div class="self-name">{{self.name}}</div>
             <form class="navbar-form navbar-right" role="search">
               <div class="form-group">
-                <input type="text" id="search-box" class="form-control typeahead" placeholder="Search">
+                <input type="text" id="search-box" disabled class="form-control typeahead" placeholder="Search">
               </div>
             </form>
         </div>
@@ -70,3 +70,4 @@ <h1 class="title">
 </header>
 
 <div class="container body">
+  <div class="row">