Rewrite of the search input field. Adding support for hitting the enter key to...

Rewrite of the search input field. Adding support for hitting the enter key to select the first entry...

git-svn-id: https://simplesamlphp.googlecode.com/svn/trunk@2903 44740490-163a-0410-bde0-09ae8108e29a

modules/discojuice/www/discojuice/discojuice.control.js

@@ -26,6 +26,8 @@ DiscoJuice.Control = {
 	
 	"extensionResponse": null,
 	
+	"quickEntry": null,
+	
 	/*
 	 * Fetching JSON Metadata using AJAX.
 	 * Callback postLoad is called when data is returned.
@@ -303,6 +305,8 @@ DiscoJuice.Control = {
  		var term = this.getTerm();
  		var categories = this.getCategories();
 
+		this.quickEntry = null;
+
 		if (!this.data) return;
 		
 		/*
@@ -329,6 +333,8 @@ DiscoJuice.Control = {
 
 		this.ui.clearItems();
 		
+		var quickSelected = false;
+		
 		hits = 0;
 		for(i = 0; i < this.data.length; i++) {
 			current = this.data[i];
@@ -373,7 +379,26 @@ DiscoJuice.Control = {
 			var descr = current.descr || null;
 	
 			// addItem(item, {country, flag}, keywordmatch, distance)
-			this.ui.addItem(current, countrydef, search, current.distance);
+			
+			var quickSel = false;
+			
+			if (!quickSelected) {
+				console.log('Term: ' + term);
+				console.log('Search: ' + search);
+				if (term && search !== false) {
+					quickSel = true;
+					quickSelected = true;
+				} else if (!term) {
+					quickSel = true;
+					quickSelected = true;	
+				}
+			}
+			
+			this.ui.addItem(current, countrydef, search, current.distance, quickSel);
+
+			if (quickSel) {
+				this.quickEntry = current;
+			}
 
 		}
 		
@@ -381,6 +406,11 @@ DiscoJuice.Control = {
 	},
 	
 	
+	"hitEnter": function () {
+		console.log(this.quickEntry);
+		this.selectProvider(this.quickEntry.entityID, this.quickEntry.subID);
+	},
+	
 	"selectProvider": function(entityID, subID) {
 	
 		// console.log('entityid: '  + entityID);
@@ -529,17 +559,84 @@ DiscoJuice.Control = {
 		/*
 			Initialise the search box.
 			*/
+		
+		var waiter = function (setCallback) {
+			var my = {};
 			
-//		this.parent.Utils.log(this.ui.popup.find("input.discojuice_search"));
-		this.ui.popup.find("input.discojuice_search").autocomplete({
-			minLength: 0,
-			source: function( request, response ) {
-				var term = request.term;
-				if (term.length === 1) return;
-//				that.resetCategories();							
-				that.prepareData();
+			// Number of milliseconds to wait for more events.
+			my.delay = 400;
+			my.counter = 0;
+			
+			// Call back to fire, when the waiter is pinged, and waited for the timeout 
+			// (without subsequent events).
+			my.callback = setCallback;
+			
+			// Ping
+			function ping (event) {
+				my.counter++;
+				setTimeout(function() {
+					if (--my.counter === 0) {
+						my.callback(event);
+					}
+				}, my.delay);
 			}
+			
+			my.ping = ping;
+			return my;
+		}
+		
+		var performSearch = waiter(function(event) {
+			
+			term = that.ui.popup.find("input.discojuice_search").val();
+			console.log(that.ui.popup.find("input.discojuice_search"));
+			console.log('Term ' + term);
+		
+//			if (term.length === 0) alert('Zero!');
+			
+			// Will not perform a search when search term is only one character..
+			if (term.length === 1) return; 
+	//		that.resetCategories();
+			that.prepareData();
 		});
+			
+//		this.parent.Utils.log(this.ui.popup.find("input.discojuice_search"));
+		this.ui.popup.find("input.discojuice_search").keydown(function (event) {
+		 	var 
+				charCode, term;
+
+		    if (event && event.which){
+		        charCode = event.which;
+		    }else if(window.event){
+		        event = window.event;
+		        charCode = event.keyCode;
+		    }
+
+		    if(charCode == 13) {
+				that.hitEnter();
+				return;
+		    }
+			
+			performSearch.ping(event);
+		});
+		this.ui.popup.find("input.discojuice_search").change(function (event) {
+			performSearch.ping(event);
+		});
+		this.ui.popup.find("input.discojuice_search").mousedown(function (event) {
+			performSearch.ping(event);
+		});
+		
+		
+// 		this.ui.popup.find("input.discojuice_search").autocomplete({
+// 			minLength: 0,
+// 			source: function( request, response ) {
+// 				var term = request.term;
+// 				
+// 				if (term.length === 0) alert('0 entries');
+// 				if (term.length === 1) return;
+// //				that.resetCategories();							
+// 				that.prepareData();
+// 			}
+// 		});
 	},
 
 	"filterCountrySetup": function (choice) {

modules/discojuice/www/discojuice/discojuice.ui.js

@@ -45,7 +45,7 @@ DiscoJuice.UI = {
 	
 	// addItem(item, description, {country, flag}, keywordmatch, distance)	 		
 	// addItem(current, current.descr || null, countrydef, search, current.distance);
-	"addItem": function(item, countrydef, search, distance) {
+	"addItem": function(item, countrydef, search, distance, quickentry) {
 		var textLink = '';
 		var classes = '';
 		if (item.weight < -50) classes += 'hothit';
@@ -63,6 +63,11 @@ DiscoJuice.UI = {
 			clear = true;
 		}
 		
+		if (quickentry) {
+//			textLink += '<span style="font-size: 80%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; background: #eee; color: #777; padding: 3px 2px 0px 2px; margin: 3px; position: relative; top: -2px">&#8629;</span>';
+			textLink += '<span style="font-size: 80%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; background: #eee; color: #777; padding: 3px 2px 0px 2px; margin: 3px; float: left; left: -10px">&#8629;</span>';
+		}
+		
 		// Add title
 		textLink += '<span class="title">' + item.title + '</span>';