Added tab completion to search input.

src/_includes/icons/filter.html

@@ -3,6 +3,14 @@
   <input placeholder="Filter icons..." id="filter-by">
   <a href="#" id="filter-clear" class="fa fa-times"></a>
 </div>
+<script>
+  try {
+    var filterSet = JSON.parse('{{ icons | flattenIconFilters | jsonify }}');
+  } catch (e) {
+    console.error('Invalid JSON data!');
+    var filterSet = [];
+  }
+</script>
 <{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="filter">
   <h2 class="page-header">Filter for <span class="text-muted" id="filter-val"></span></h2>
   {% if page.navbar_active != "icons" %}

src/_layouts/base.html

@@ -58,6 +58,7 @@
 <script src="http://platform.twitter.com/widgets.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
+<script src="{{ page.relative_path}}assets/js/tabcomplete.min.js"></script>
 <script src="{{ page.relative_path }}assets/js/site.js"></script>
 
 </body>

src/_plugins/flatten_icon_filters.rb

@@ -0,0 +1,38 @@
+##
+# Flattens the icons object to a one-dimensional array of possible search terms.
+
+require 'set'
+
+module Jekyll
+  module FlattenArray
+    def flattenIconFilters(icons)
+      flattened = Set.new
+      icons.each do |icon|
+        toAdd = []
+
+        toAdd.push(icon["class"].downcase) # Add class as a filter value
+
+        # Add any existing aliases as a filter value
+        if not icon["aliases"].nil?
+          icon["aliases"].each do |iconAlias|
+            toAdd.push(iconAlias.downcase)
+          end
+        end
+
+        # Add any existing filters as a filter value
+        if not icon["filter"].nil?
+          icon["filter"].each do |iconFilter|
+            toAdd.push(iconFilter.downcase)
+          end
+        end
+        flattened.merge(toAdd)
+
+        print toAdd if toAdd.include? true
+        print toAdd if toAdd.include? false
+      end
+      return flattened.to_a # .to_a because we can't jsonify a <Set>
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::FlattenArray)

src/assets/js/site.js

@@ -16,6 +16,11 @@ $(function() {
 
     var $icons = $('.filter-icon', $filter);
 
+    // Add tab completion
+    $filter_by.tabcomplete(filterSet, {
+      arrowKeys: true
+    });
+
     $clear.click(function(e) {
       e.preventDefault();
       $filter_by.val('').trigger('keyup').focus();
@@ -24,7 +29,7 @@ $(function() {
 
     $filter_by.keyup(function() {
       var $this = $(this);
-      var val = $this.val();
+      var val = $this.val().toLowerCase();
       $filter.toggle(!!val);
       $other.toggle(!val);
       $clear.toggleClass('gone', !val);
@@ -61,36 +66,4 @@ $(function() {
     }
     return false;
   }
-
-
-
-
-  // make code pretty
-//  $('pre').addClass('prettyprint');
-//  window.prettyPrint && prettyPrint();
-
-  // Disable links with href="#" inside <section>, so users can click on them
-  // to preview :active state without being scrolled up to the top of the page.
-//  $('section a[href="#"]').click(function(e) {
-//    e.preventDefault();
-//    e.stopPropagation();
-//  });
-
-//  // inject twitter & github counts
-//  $.ajax({
-//    url: 'http://api.twitter.com/1/users/show.json',
-//    data: {screen_name: 'fortaweso_me'},
-//    dataType: 'jsonp',
-//    success: function(data) {
-//      $('#followers').html(data.followers_count);
-//    }
-//  });
-//  $.ajax({
-//    url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
-//    dataType: 'jsonp',
-//    success: function(data) {
-//      $('#watchers').html(data.data.watchers);
-//      $('#forks').html(data.data.forks);
-//    }
-//  });
 });

src/assets/less/site/fontawesome-icon-list.less

@@ -33,14 +33,19 @@
 
 .filter-parent {
   display: inline-block;
+  position: relative;
   border: 1px solid #ccc;
   padding: 0 10px 0 14px;
   border-radius: 3px;
-  #filter-by {
+  #filter-by, .hint {
     padding: 7px 0 7px 12px;
     border: 0 none;
     outline: 0 none;
-    width: 200px;
+    width: 300px;
+    z-index: 2;
+  }
+  .hint {
+    color: #aaa;
   }
   a {
     text-decoration: none;