add javascript filter box

3 files changed, 55 insertions, 0 deletions

diff --git a/_includes/footer.html b/_includes/footer.html
index f8a9d7e..45a1f46 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,7 @@
         <script src="assets/js/jquery.min.js"></script>
         <script src="assets/js/bootstrap.min.js"></script>
         <script src="assets/js/sorttable.js"></script>
+        <script src="assets/js/filtertable.js"></script>
         <script src="assets/js/jquery.timeago.js"></script>
         <script>
             $(function() {
diff --git a/assets/js/filtertable.js b/assets/js/filtertable.js
new file mode 100644
index 0000000..ecee7ab
--- /dev/null
+++ b/assets/js/filtertable.js
@@ -0,0 +1,53 @@
+/*
+ LightTableFilter by Chris Coyier
+ http://codepen.io/chriscoyier/pen/tIuBL
+ */
+(function(document) {
+    'use strict';
+
+    var LightTableFilter = (function(Arr) {
+
+	var _input;
+
+	function _onInputEvent(e) {
+	    _input = e.target;
+	    var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
+	    Arr.forEach.call(tables, function(table) {
+		Arr.forEach.call(table.tBodies, function(tbody) {
+		    Arr.forEach.call(tbody.rows, _filter);
+		});
+	    });
+	}
+
+	function _filterExpr(val, text) {
+	    return !val.split(' ').every(function(word) {
+		if (word.charAt(0) === '-') {
+		    return text.indexOf(word.substring(1)) === -1;
+		} else {
+		    return text.indexOf(word) !== -1;
+		}
+	    });
+	}
+
+	function _filter(row) {
+	    var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
+	    row.style.display = _filterExpr(val, text) ? 'none' : 'table-row';
+	}
+
+	return {
+	    init: function() {
+		var inputs = document.getElementsByClassName('light-table-filter');
+		Arr.forEach.call(inputs, function(input) {
+		    input.oninput = _onInputEvent;
+		});
+	    }
+	};
+    })(Array.prototype);
+
+    document.addEventListener('readystatechange', function() {
+	if (document.readyState === 'complete') {
+	    LightTableFilter.init();
+	}
+    });
+
+})(document);
diff --git a/index.html b/index.html
index 31884a9..696e6c6 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@ layout: default
 
         <hr>
 
+        <input type="search" class="light-table-filter form-control" data-table="sortable" placeholder="Filter" style="width: 100%">
         <table class="table table-striped table-condensed sortable">
             <thead>
                 <tr>