Merge pull request #27 from alicoding/new

New search filter

Author: alicoding

index.html

@@ -11,7 +11,11 @@
     <link href="css/normalize.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/main.css" rel="stylesheet">
-
+    <style>
+          .filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
+          .fitler-table .quick:hover { text-decoration: underline; }
+          td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
+          </style>
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -76,9 +80,9 @@
       <div class="panel panel-default">
         <div class="panel-heading">By Component</div>
         <div class="panel-body">
-          <input type="text" class="form-control" placeholder="Filter">
+
         </div>
-        <table id="stats-table" class="table tablesorter">
+        <table id="stats-table" class="table tablesorter sieve">
           <thead>
             <tr>
               <th>Component</th>
@@ -109,6 +113,15 @@
     <script src="js/plugins.js"></script>
     <script src="js/vendor/bootstrap.min.js"></script>
     <script src="js/vendor/jquery.tablesorter.min.js"></script>
+    <script src="js/vendor/jquery.filtertable.min.js"></script>
+    <script>
+       $(document).ready(function() {
+         $("table.sieve").sieve();
+         $( "input" ).addClass( "form-control" );
+         $( "input" ).attr( "placeholder", "Search here" );
+       });
+      </script>
+
   </body>
 </html>
 

js/vendor/jquery.filtertable.min.js

@@ -0,0 +1,67 @@
+/*!
+ * jQuery Sieve v0.3.0 (2013-04-04)
+ * http://rmm5t.github.io/jquery-sieve/
+ * Copyright (c) 2013 Ryan McGeary; Licensed MIT
+ */
+(function() {
+  var $;
+
+  $ = jQuery;
+
+  $.fn.sieve = function(options) {
+    var compact;
+    compact = function(array) {
+      var item, _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = array.length; _i < _len; _i++) {
+        item = array[_i];
+        if (item) {
+          _results.push(item);
+        }
+      }
+      return _results;
+    };
+    return this.each(function() {
+      var container, searchBar, settings;
+      container = $(this);
+      settings = $.extend({
+        searchInput: null,
+        searchTemplate: "<div><label>Search: <input type='text'></label></div>",
+        itemSelector: "tbody tr",
+        textSelector: null,
+        toggle: function(item, match) {
+          return item.toggle(match);
+        },
+        complete: function() {}
+      }, options);
+      if (!settings.searchInput) {
+        searchBar = $(settings.searchTemplate);
+        settings.searchInput = searchBar.find("input");
+        container.before(searchBar);
+      }
+      return settings.searchInput.on("keyup.sieve change.sieve", function() {
+        var items, query;
+        query = compact($(this).val().toLowerCase().split(/\s+/));
+        items = container.find(settings.itemSelector);
+        items.each(function() {
+          var cells, item, match, q, text, _i, _len;
+          item = $(this);
+          if (settings.textSelector) {
+            cells = item.find(settings.textSelector);
+            text = cells.text().toLowerCase();
+          } else {
+            text = item.text().toLowerCase();
+          }
+          match = true;
+          for (_i = 0, _len = query.length; _i < _len; _i++) {
+            q = query[_i];
+            match && (match = text.indexOf(q) >= 0);
+          }
+          return settings.toggle(item, match);
+        });
+        return settings.complete();
+      });
+    });
+  };
+
+}).call(this);