Javascript-Search Filter

Can someone help with my code in JavaScript? Design a search function to my Javascript, along with the sorting abilities that I already have in the Javascript.

My HTML and JavaScript is provided below (PLEASE! Don't change what I already provided just need the search filter added..Thank you!):

HTML

CreativeFolk

My Videos

Camille Berger

Paris, France

Genre	Title	Duration	Date
Animation	Wildfood	3:47	2014-07-16
Film	The Deer	6:24	2014-02-28
Animation	The Ghost	11:40	2012-04-10
Film	Animals	6:40	2005-12-21
Animation	Wagons	21:40	2007-04-12

JavaScript

var compare = { // Declare compare object name: function(a, b) { // Add a method called name a = a.replace(/^the /i, ''); // Remove The from start of parameter b = b.replace(/^the /i, ''); // Remove The from start of parameter

if (a b ? 1 : 0; // If a is greater than b return 1 OR } // if they are the same return 0 }, duration: function(a, b) { // Add a method called duration a = a.split(':'); // Split the time at the colon b = b.split(':'); // Split the time at the colon

a = Number(a[0]) * 60 + Number(a[1]); // Convert the time to seconds b = Number(b[0]) * 60 + Number(b[1]); // Convert the time to seconds

return a - b; // Return a minus b }, date: function(a, b) { // Add a method called date a = new Date(a); // New Date object to hold the date b = new Date(b); // New Date object to hold the date

return a - b; // Return a minus b } };

$('.sortable').each(function() { var $table = $(this); // This sortable table var $tbody = $table.find('tbody'); // Store table body var $controls = $table.find('th'); // Store table headers var rows = $tbody.find('tr').toArray(); // Store array containing rows

$controls.on('click', function() { // When user clicks on a header var $header = $(this); // Get the header var order = $header.data('sort'); // Get value of data-sort attribute var column; // Declare variable called column

// If selected item has ascending or descending class, reverse contents if ($header.is('.ascending') || $header.is('.descending')) { $header.toggleClass('ascending descending'); // Toggle to other class $tbody.append(rows.reverse()); // Reverse the array } else { // Otherwise perform a sort $header.addClass('ascending'); // Add class to header // Remove asc or desc from all other headers $header.siblings().removeClass('ascending descending'); if (compare.hasOwnProperty(order)) { // If compare object has method column = $controls.index(this); // Search for columns index no

rows.sort(function(a, b) { // Call sort() on rows array a = $(a).find('td').eq(column).text(); // Get text of column in row a b = $(b).find('td').eq(column).text(); // Get text of column in row b return compare[order](a, b); // Call compare method });

$tbody.append(rows); } } }); });

CSS

body { margin: 0; padding: 0; background-color: #f1f1f1; font-family: 'Karla', sans-serif; color: #333;}

/* Header */ header { background-color: #333333; margin: 0 0 40px 0; padding: 10px 0 0 0; min-height: 50px; text-align: center;}

h1 { background-image: url('../img/creative-folk.png'); background-repeat: no-repeat; background-position: center center; margin: 10px auto 5px auto; width: 516px; height: 21px; text-align: center; text-indent: 100%; white-space: nowrap; overflow: hidden;}

h2 { font-size: 180%; margin: 0;} h2, h4 { font-weight: normal;} h4 { color: #333; display: inline-block; font-size: 120%; margin: 5px 0 5px 0;}

/* Filter and search options */ #price-range { width: 370px; margin: 10px auto 30px auto; text-align: center; font-weight: bold;} #value-min, #value-max { width: 100px; border: none; background-color: #f1f1f1; font-family: 'Karla', sans-serif;} #slider {margin: 30px 0 30px 0;} /* Filter and search options */ #buttons, #search { text-align: center; margin-bottom: 30px;}

/* Filter buttons */ button { background-color: #d7d7d7; border: none; padding: 3px 10px 4px 10px; border-radius: 4px; color: #333; font-family: 'Karla', sans-serif; font-size: 100%;}

button:hover, button.active { background-color: #00cccc; color: #fff; cursor: pointer;}

/* Search input */ input { font-size: 120%; border: 1px solid #999; padding: 5px;} input:hover { border: 1px solid #666;} input:focus { border: 1px solid #00cccc; outline: none;}

/* Gallery of images */ #gallery { text-align: center; max-width: 1020px; margin: 0 auto;}

#gallery img { width: 300px; height: 150px; border-radius: 3px; border: 8px solid #fff; margin: 6px; -webkit-box-shadow: 0 0 3px 3px #ebebeb; box-shadow: 0 0 3px 3px #ebebeb; float: left;}

/* Table styles */ table { margin: 0 auto; width: 780px;} table#rates {width: 380px;} th, td { border-radius: 3px; color: #333; padding: 7px 10px 5px 10px; min-width: 9em; text-align: left;} th { background-color: #d7d7d7; font-weight: bold; text-transform: uppercase;} td { background-color: #fff;} table.sortable th:hover { cursor: pointer;} th.ascending, th.descending, table.sortable th:hover { background-color: #00cccc; color: #fff;}

/* Arrows for table sorting */ th.ascending:after { font-size: 60%; content: '\25B2'; float: left; padding: 4px 5px 0 0;} th.descending:after { font-size: 60%; content: '\25BC'; float: left; padding: 4px 5px 0 0;}

.about { width: 780px; margin: 0 auto 40px auto;} .about:after { content: ""; display: table; clear: both;} .about h2 { text-align: left; float: left;}

.bio { float: right; width: 195px;} .bio img { float: left; width: 50px; height: 50px; margin-right: 10px;}

.location { padding-left: 74px; background-image: url('../img/pointer.png'); background-repeat: no-repeat; background-position: 60px 1px; font-size: 90%;}

Example:

earch genre GENRE Film Film Animation Animation Animation TITLE Animals The Deer The Ghost Wagons Wildfood DURATION 6:40 6:24 11:40 21:40 3:47 DATE 2005-12-21 2014-02-28 2012-04-10 2007-04-12 2014-07-16 After Searching for Animation" in GENRE Animation GENRE Animation Animation Animation The Ghost Wagons Wildfood DURATION 11:40 21:40 3:47 DATE 2012-04-10 2007-04-12 2014-07-16