Add search with autocomplete

README.md

@@ -2,7 +2,7 @@
 
 **Requires KKS-node 3.0.x**
 
-This is a **builder** for [kss-node](https://github.com/kss-node/kss-node) living styleguide. It feature a toggle-able sidebar menu so you can choose to see the styleguide at full browser width.
+This is a **builder** for [kss-node](https://github.com/kss-node/kss-node) living styleguide. It feature a toggle-able sidebar menu so you can choose to see the styleguide at full browser width. It also has a search function to easily find your component.
 
 ## How to apply this builder
 

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "previousnext/kss-node-offscreen-template",
   "type": "library",
-  "description": "A kss-node handlebars builder with offscreen menu.",
+  "description": "A kss-node handlebars builder with offscreen menu and search.",
   "homepage": "https://github.com/previousnext/kss-node-offscreen-template",
   "support": {
     "issues": "https://github.com/previousnext/kss-node-offscreen-template",

index.hbs

@@ -156,14 +156,27 @@
   {{/each}}
 {{/if}}
 </article>
+
+
+<ul id="kss-toc" style="display: none;">
+  {{#each menu}}
+    <li data-url="/section-{{referenceURI}}.html#kssref-{{referenceURI}}" data-name="{{header}}"></li>
+    {{#each children}}
+      <li data-url="/section-{{../referenceURI}}.html#kssref-{{referenceURI}}" data-name="{{header}}"></li>
+    {{/each}}
+  {{/each}}
+</ul>
+
 </div>
 
 <!-- SCRIPTS -->
 <script src="kss-assets/kss.js"></script>
 <script src="kss-assets/scrollspy.js"></script>
 <script src="kss-assets/prettify.js"></script>
 <script src="kss-assets/jquery.min.js"></script>
+<script src="kss-assets/jquery.easy-autocomplete.min.js"></script>
 <script src="kss-assets/offscreen.js"></script>
+<script src="kss-assets/search.js"></script>
 <script>
   prettyPrint();
   var spy = new ScrollSpy('#kss-node', {
@@ -180,5 +193,6 @@
     <a href="https://github.com/previousnext/kss-node-offscreen-template"><img src="kss-assets/github-fork--black.png" alt="Fork me on GitHub"></a>
   </footer>
 {{/if}}
+
 </body>
 </html>

kss-assets/kss.scss

@@ -345,6 +345,68 @@ $kss-vertical-rhythm      : $kss-font-size * 1.5;
   }
 }
 
+.kss-search {
+  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
+  margin-bottom: 20px;
+
+  input {
+    width: 100%;
+    background: $kss-colors-background;
+    border: 2px solid $kss-colors-border;
+    color: $kss-colors-foreground;
+    border-radius: 6px;
+    padding: 0 .625rem 0 .3125rem;
+    height: 2.75rem;
+    text-indent: .3125rem;
+    font-size: 1.125rem;
+
+    &:focus {
+      border-color: $kss-colors-border;
+    }
+  }
+
+  .easy-autocomplete {
+    position: relative;
+  }
+
+  .easy-autocomplete-container {
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+
+    ul {
+      background: lighten($kss-colors-sidebar, 5%);
+      border-width: 2px;
+      border-style: solid;
+      border-color: $kss-colors-border;
+      border-bottom-right-radius: 6px;
+      border-bottom-left-radius: 6px;
+      margin: -4px 0 0;
+      padding: 6px 0 0;
+      list-style: none;
+      position: relative;
+      display: none;
+    }
+
+    a {
+      color: $kss-colors-foreground;
+      text-decoration: none;
+      padding: 4px 12px;
+      display: block;
+
+      &:hover,
+      &:focus {
+        color: $kss-colors-link-hover;
+      }
+    }
+
+    b {
+      font-weight: bold;
+    }
+  }
+}
+
 // ------------------------------------------------------------------------------
 // Content-area components
 // ------------------------------------------------------------------------------

kss-assets/search.js

@@ -0,0 +1,39 @@
+(function () {
+
+  // Build toc as an array.
+  var tocList = function ($listItems) {
+    var list = [];
+    $listItems.each(function () {
+      var $this   = $(this);
+      properties = {
+        name: $this.data('name'),
+        url: $this.data('url')
+      };
+      list.push(properties);
+    });
+    return list;
+  };
+
+  // Setup easy-autocomplete options.
+  var options = {
+    data: tocList($('#kss-toc li')),
+    placeholder: "Search",
+    getValue: function(element) {
+      return element.name;
+    },
+    list: {
+      match: {
+        enabled: true
+      }
+    },
+    template: {
+      type: "links",
+      fields: {
+        link: "url"
+      }
+    }
+  };
+
+  // Initiate the search field.
+  $('#kss-search').easyAutocomplete(options);
+})();