Filter search results instead of highlighting.

Also, made var restaurants in js a global variable so other scripts can access
the data (e.g. typeAhead.js).

website/static/js/grid.js

-function sort_restaurants(restaurants) {
-    var open = $.grep(restaurants, 
+var restaurants = [];
+
+function sort_restaurants(filtered_restaurants) {
+    var open = $.grep(filtered_restaurants, 
             function (r, idx) { return (r.open === true) });
-    var closed = $.grep(restaurants, 
+    var closed = $.grep(filtered_restaurants, 
             function (r, idx) { return (r.open === false) });
     return $.merge(open, closed);
 }
 
-function construct_grid(restaurants) {
-    restaurants = sort_restaurants(restaurants);
-    $.each(restaurants, function (idx, restaurant) {
+function construct_grid(filtered_restaurants) {
+    // Hide footer while generating grid to prevent it flying across the screen
+    $('#footer').hide();
+    $('#grid').empty();
+    $('#grid').html('<div class="row"></div>');
+    if (filtered_restaurants.length == 0) {
+        $('#grid').append('<span class="span2 offset5">No results found.</span>');
+        return;
+    }
+    sorted_restaurants = sort_restaurants(filtered_restaurants);
+    $.each(sorted_restaurants, function (idx, restaurant) {
         var open_class = 'closed';
         if (restaurant.open) {
             open_class = 'opened';
@@ -25,16 +35,13 @@ function construct_grid(restaurants) {
             );
         }
     });
+    $('#footer').show();
 }
 
 $.ajax({
     url: '/ajax/schedule/',
 }).done(function (data) {
-    // Hide footer while generating grid to prevent it flying across the screen
-    $('#footer').hide();
-    $('#grid').empty();
-    $('#grid').html('<div class="row"></div>');
-    var restaurants = data.data;
+    restaurants = data.data;
     $.each(restaurants, function (idx, restaurant) {
         var now = new Date();
         var date = new Date().setHours(0,0,0,0);
@@ -101,5 +108,4 @@ $.ajax({
         });
     });
     construct_grid(restaurants);
-    $('#footer').show();
 });

website/static/js/typeAhead.js

@@ -2,38 +2,27 @@ $.ajax({
     url: '/ajax/schedule/',
 }).done(function (data) {
 	//collecting list of restaurant names from server data	
-	var restaurants = [];
+	var rest_names = [];
 	
 	for (var i = 0; i < data.data.length; i++) {
-		restaurants.push(data.data[i].name);
+		rest_names.push(data.data[i].name);
 	};
-	//Monitors for keyboard activity to detect when the input field is empty
-    $('#searchBar').keyup(function() {
-		var value = $('#searchBar').val();
-		if (value == 0){
-			//resets all backgrounds to white if the search bar is empty 
-			$('.open').css('background-color','white');
-			$('.closed').css('background-color','white');
-		}	  
-	});	   	
 	// For doumentation on jQuery's autocomplete: (api.jqueryui.com/autocomplete)     	 	
     $("#searchBar").autocomplete({  
-    	source: restaurants,
+    	source: rest_names,
     	//making it so the search result list doesn't physically appear 
     	messages: { 
         	noResults: '',
         	results: function(){} 
         },
+        minLength: 0,
         response: function(event, ui) {
-			//resets all backgrounds to white if the search bar is edited 
-			$('.open').css('background-color','white');
-			$('.closed').css('background-color','white');
 			//ui.content array contains all names that are returned from the search
-			for (var result in ui.content){
-				//Highlights all search results	
-				$('.open:contains("'+ui.content[result].value+'")').css('background-color','#FDFFBF');
-				$('.closed:contains("'+ui.content[result].value+'")').css('background-color','#FDFFBF');
-			}
+            results = $.map(ui.content, function(r) { return r.value; });
+            filtered = $.grep(restaurants, function (r, idx) {
+                    return ($.inArray(r.name, results) != -1);
+            });
+            construct_grid(filtered);
             // To prevent the page width from extending
             $('.ui-autocomplete').remove();
 		}