add frontend search

compare.html

@@ -43,8 +43,14 @@
             </div>
         </section>
         
-        <!-- That's it ! compartion table :) -->
         <section>
+            <div class="search">
+                <input type="text" placeholder="Search" id="search">
+            </div>
+        </section>
+
+        <!-- That's it ! compartion table :) -->
+        <section id="comparisonTable">
             <nav>
             <blockquote class="guide">Browser version " + " means latest version .</blockquote>
             	<div class="parent">
@@ -1788,6 +1794,9 @@
                 </div>
             </div>
 
+            <div class="parent" id="noSearch">
+                There were no search results matching <span></span>
+            </div>
             </nav>
         </section>
 
@@ -1824,6 +1833,7 @@
 
         <!-- Scripts -->
         <script type="text/javascript" src="js/jquery.min.js"></script>
+        <script type="text/javascript" src="js/search.js"></script>
         <script>
             $('nav .parent ul').on('click', function (e) {
                 $(this).next('.info').toggleClass('active')

css/style.css

@@ -141,6 +141,25 @@ section p:last-child {
     top: 50%;
 	margin-top: -7px;
 }
+
+#noSearch {
+    display: none;
+    text-align: center;
+}
+
+#search {
+    width: 100%;
+    margin-top: 5px;
+    font-size: 16px;
+    line-height: 25px;
+    font-family: 'Droid Sans';
+}
+
+#search:focus {
+    outline: none;
+    border-color: #900;
+}
+
 /* Table */ /* We should use nav and ul li for collapsing details */
 nav {
     width: 980px;

index.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="javascripts/modernizr.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="javascripts/headsmart.min.js"></script>
+    <script type="text/javascript" src="javascripts/search.js"></script>
     <script type="text/javascript">
       $(document).ready(function () {
         $('#main_content').headsmart()

js/search.js

@@ -0,0 +1,25 @@
+$(document).ready(function(){
+	$("input#search").keyup(function(){
+		var query = $(this).val();
+		if (!query) {
+			$("#comparisonTable div.parent").show();
+			$("#noSearch").hide();
+			return;
+		}
+		var regex = new RegExp(query, "ig"), count = 0;
+		$("#comparisonTable div.parent:not(#noSearch)").each(function(){
+			if ($(this).text().search(regex) < 0) {
+				$(this).hide();
+			} else {
+				$(this).show();
+				count += 1
+			}
+		});
+		if (count == 0) {
+			$("#noSearch span").text(query)
+			$("#noSearch").show();
+		} else {
+			$("#noSearch").hide();
+		}
+	});
+});