add plugin and demo from CodePen

kbjohnson90 · kbjohnson90 · commit 3cfd8ceb215a · 2014-06-06T17:32:41.000-04:00
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,42 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
+
+.wrapper {
+	font-family: Roboto;
+	width: 900px;
+	max-width: 100%;
+	margin: auto;
+}
+
+table {
+	width: 100%;
+	border-spacing: 0;
+}
+
+table th {
+	text-align: left;
+	border-bottom: 1px solid black;
+}
+
+table tbody tr:nth-child(even) {
+	background-color: #DDD;
+}
+
+table tbody td {
+	padding: 2px 5px;
+}
+
+table tbody td:first-of-type {
+font-weight: bold;
+}
+
+@media only screen and (max-width: 40em) {
+	table th {
+		display: none;
+	}
+	table tbody td {
+		display: block;
+	}
+	table tbody td:not(:first-of-type) {
+		margin-left: 20px;
+	}
+}
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,21 @@
+$(document).ready(function () {
+
+	$.ajax({
+		url: 'http://api.randomuser.me/?results=100&seed=foobar',
+		dataType: 'json',
+		success: function (data) {
+		  for ( var i = 0; i < data.results.length; i++ ) {
+		    //console.log(data.results[i].user.name.first);
+		    $('#example tbody').append("<tr></tr>");
+		    $('#example tbody tr:last-of-type')
+		    .append("<td>" + data.results[i].user.name.first + " " + data.results[i].user.name.last + "</td>")
+		    .append("<td>" + data.results[i].user.email + "</td>")
+		    .append("<td>" + data.results[i].user.cell + "</td>");
+		  }
+		}
+	});
+
+	$( "#example" ).searchable({
+		placeholder: "Search Table",
+	});
+});
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+	<meta charset="UTF-8">
+
+	<title>Searchable Table | jquery.searchable.js</title>
+
+	<link rel="stylesheet" type="text/css" href="demo.css">
+
+</head>
+
+<body>
+
+	<div class="wrapper">
+	<table id="example">
+	<thead>
+	  <tr>
+	    <th>Name</th>
+	    <th>Email</th>
+	    <th>Cell</th>
+	  </tr>
+	</thead>
+
+	<tbody>
+
+	</tbody>
+	</table>
+	</div>
+
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+	<script src="../dist/jquery.searchable.js"></script>
+	<script src="demo.js"></script>
+
+</body>
+
+</html>
diff --git a/dist/jquery.searchable.js b/dist/jquery.searchable.js
@@ -0,0 +1,38 @@
+/*
+* jQuery Searchable - v0.1.1
+* Search rows in a table.
+* http://kylebjohnson.me
+*
+* Made by Kyle B. Johnson
+* Under MIT License
+*/
+(function( $ ) {
+  $.fn.searchable = function(options) {
+
+    var settings = $.extend({}, {
+      search_class: '',
+      search_placeholder: "search",
+    }, options);
+
+    return this.each(function() {
+
+      var search_id = this.id + '_search';
+
+      jQuery('<input/>', {
+        id: search_id,
+        class: settings.search_class,
+        placeholder: settings.placeholder,
+      }).insertBefore( $(this) );
+
+      $( '#' + search_id ).keypress(function() {
+        var search = $( this ).val();
+        $('tbody tr').show();
+        if(search) {
+          $("tbody tr:not(:contains('" + search + "'))").hide();
+        }
+      });
+
+    });
+
+  };
+}( jQuery ));
diff --git a/dist/jquery.searchable.min.js b/dist/jquery.searchable.min.js
@@ -0,0 +1,9 @@
+/*
+* jQuery Searchable - v0.1.1
+* Search rows in a table.
+* http://kylebjohnson.me
+*
+* Made by Kyle B. Johnson
+* Under MIT License
+*/
+(function(e){e.fn.searchable=function(t){var n=e.extend({},{search_class:"",search_placeholder:"search"},t);return this.each(function(){var t=this.id+"_search";jQuery("<input/>",{id:t,"class":n.search_class,placeholder:n.placeholder}).insertBefore(e(this));e("#"+t).keypress(function(){var t=e(this).val();e("tbody tr").show();if(t){e("tbody tr:not(:contains('"+t+"'))").hide()}})})}})(jQuery)
