Added results count to filter

tenderlove · Jan 6, 2011 · 77d0701 · 77d0701
1 parent 94dbcf4
commit 77d0701
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb
@@ -1,4 +1,5 @@
 <div id="filter">
+  <span class="results"></span>
   <input id="filter_by_username" type="text" placeholder="Search by username">
 </div><!-- #filter -->
 <div id="stats">

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -13,17 +13,32 @@ $(document).ready(function(){
 	//bind the filter input on the INDEX list
 	$('#filter_by_username').keyup(function(){
 	  $('#accounts .account').addClass('hide');
-	  regexp = new RegExp($(this).val().toLowerCase());    
+	  regexp = new RegExp($(this).val().toLowerCase());
 	  for(var i=0; i<usernames.length; i++) {
 	    if(usernames[i].toLowerCase().match(regexp)){
 	      $('#accounts .account').find('h2:contains('+usernames[i]+')').closest('.account').removeClass('hide');
 	    }
     }
+    var count = $('.account').not('.hide').length;
+    switch (count) {
+      case 1:
+        results = count+" result";
+        break;
+      default:
+        results = count+" results";
+        break;
+    }
+    if ($(this).val() != '') {
+      $('#filter .results').html(results);
+    } else {
+      $('#filter .results').empty();
+    }
+
 	})
 
 	// Set the card height relative to the services height
-	s_height = $('.my_services').height();
-	a_height = $('#account .account').height();
+	s_height = $('.my_services').height();      // services
+	a_height = $('#account .account').height(); // account
 	if (s_height >= a_height) {
 	  $('#account .account').height(s_height);
 	}

diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
@@ -131,16 +131,13 @@ p{
   margin-right: 10px;
   margin-bottom: -5px;
 }
+#filter .results {
+  padding-right: 10px;
+  text-shadow: 0 1px 1px #fff;
+  color: #444;
+  font-weight: bold;
+}
 #filter_by_username {
-/*  padding: 5px;
-  width: 200px;
-  font-size: 16px;
-  border: none;
-  color: #333;
-  border-bottom: 1px solid #ccc;
-  border-radius: 2px;
-  background: transparent;
-*/
   width: 200px;
   font-size: 16px;
   background: #ddd;