more work on find as you type

Author: sethladd

lib/resources/script.js

@@ -58,10 +58,33 @@ function shiftWindow() {
   scrollBy(0, -68);
 }
 
+function initSearch() {
+  var elements = new Bloodhound({
+    datumTokenizer: function(d) {
+      return Bloodhound.tokenizers.whitespace(d.name);
+    },
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    prefetch: 'index.json'
+  });
+
+  $('#search-box.typeahead').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 3
+  },
+  {
+    name: 'elements',
+    source: elements,
+    displayKey: 'name',
+    limit: 10
+  });
+}
+
 document.addEventListener("DOMContentLoaded", function() {
   prettyPrint();
   initScroller();
   initSideNav();
+  initSearch();
 
   // Make sure the anchors scroll past the fixed page header (#648).
   if (location.hash) shiftWindow();

lib/resources/styles.css

@@ -354,6 +354,12 @@ footer .container-fluid {
   line-height: 1;
 }
 
+@media screen and (min-width: 768px) {
+  nav ol.breadcrumbs {
+    float: left;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .breadcrumbs {
     margin: 0 0 24px 0;
@@ -594,8 +600,75 @@ button {
    }
 }
 
-/* source code method bodies */
-
 #overlay-under-drawer {
   display: none;
 }
+
+/* find-as-you-type search box */
+
+.typeahead,
+.tt-query,
+.tt-hint {
+  width: 396px;
+  height: 30px;
+  padding: 8px 12px;
+  font-size: 24px;
+  line-height: 30px;
+  outline: none;
+}
+
+.typeahead {
+  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);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-menu {
+  width: 422px;
+  margin: 12px 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+          border-radius: 8px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  font-size: 18px;
+  line-height: 24px;
+  color: #212121;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+  margin: 0;
+}

lib/resources/typeahead.bundle.min.js

@@ -8,6 +8,7 @@ const List<String> resource_names = const [
   'package:dartdoc/resources/prettify.js',
   'package:dartdoc/resources/script.js',
   'package:dartdoc/resources/styles.css',
+  'package:dartdoc/resources/typeahead.bundle.min.js',
   'package:dartdoc/resources/css/bootstrap.css',
   'package:dartdoc/resources/css/bootstrap.css.map',
   'package:dartdoc/resources/css/bootstrap.min.css'

lib/src/resources.g.dart

@@ -22,6 +22,8 @@
     </div>
 </footer>
 
+<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="static-assets/typeahead.bundle.min.js"></script>
 <script src="static-assets/prettify.js"></script>
 <script src="static-assets/script.js"></script>
 <!-- Do not remove placeholder -->

lib/templates/_footer.html

@@ -37,6 +37,11 @@
                 <li class="self-crumb">{{self.name}}</li>
             </ol>
             <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">
+              </div>
+            </form>
         </div>
     </nav>
     <div class="container masthead">