NIHVIVO-2343 Implement the "search status" text span.

webapp/web/js/account/accountProxyCommon.js

@@ -97,6 +97,9 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, existing)
  *   addProxyInfo -- a function that we can call when an item is selected.
  *          It will take the selection info, build a proxyInfoElement, and add 
  *          it to the panel.
+ *   reportSearchStatus -- a function that we can call when a search is done. It
+ *          will accept the length of the search term and the number of results, 
+ *          and will display it in some way.
  * ----------------------------------------------------------------------------
  * Before executing the AJAX request, the query from the parms map will be modified, 
  * replacing "%term%" with the current search term.
@@ -108,7 +111,7 @@ function proxyInfoElement(template, uri, label, classLabel, imageUrl, existing)
  *   -- calling addProxyInfo() and clearing the field when a value is selected.
  * ----------------------------------------------------------------------------
  */
-function proxyAutocomplete(parms, getProxyInfos, addProxyInfo) {
+function proxyAutocomplete(parms, getProxyInfos, addProxyInfo, reportSearchStatus) {
 	var cache = [];
 	
 	var filterResults = function(parsed) {
@@ -123,13 +126,21 @@ function proxyAutocomplete(parms, getProxyInfos, addProxyInfo) {
 		});
 		return filtered;
 	}
-	
+
-    this.minLength = 3,
+	var sendResponse = function(request, response, results) {
+        reportSearchStatus(request.term.length, results.length);
+		response(results);
+	}
+
+    this.minLength = 0,
     
     this.source = function(request, response) {
+    	if (request.term.length < 3) {
+    		sendResponse(request, response, []);
+    		return;
+    	} 
         if (request.term in cache) {
-        	var filtered = filterResults(cache[request.term]);
+        	sendResponse(request, response, filterResults(cache[request.term]));
-            response(filtered);
             return;
         }
         $.ajax({
@@ -143,8 +154,7 @@ function proxyAutocomplete(parms, getProxyInfos, addProxyInfo) {
                 var results = $.parseJSON(xhr.responseText);
                 var parsed = sparqlUtils.parseSparqlResults(results); 
                 cache[request.term] = parsed; 
-                var filtered = filterResults(parsed);
+                sendResponse(request, response, filterResults(parsed));
-                response(filtered);
             }
         });
     }

webapp/web/js/account/accountProxyProxiesPanel.js

@@ -119,6 +119,7 @@ function proxyProxiesPanel(p)  {
 	this.panel = p;
 	this.proxyDataDiv = $("div[name='proxyData']", this.panel).first();
 	this.addAutoCompleteField = $("input[name='proxySelectorAC']", this.panel).first();
+	this.searchStatusField = $("span[name='proxySelectorSearchStatus']", this.panel).first();
 	
 	this.parseProxyTemplate();
 	this.parseProxyData();
@@ -135,18 +136,38 @@ function proxyProxiesPanel(p)  {
         self.displayProxyData();
 	}
 	
+	
 	this.setupAutoCompleteFields = function() {
 		var parms = {
 		    query: query, 
 		    model: "userAccounts",
 		    url: sparqlQueryUrl
 		    };
-	    this.addAutoCompleteField.autocomplete(new proxyAutocomplete(parms, this.getProxyInfos, this.addProxyInfo));
+		var reportSearchStatus = new searchStatusField(this.searchStatusField, 3).setText;
+	    this.addAutoCompleteField.autocomplete(new proxyAutocomplete(parms, this.getProxyInfos, this.addProxyInfo, reportSearchStatus));
 	}
 
 	this.setupAutoCompleteFields();
 }
 
+function searchStatusField(element, minLength) {
+	var emptyText = element.text();
+	var moreCharsText = element.attr('moreCharsText');
+	var noMatchText = element.attr('noMatchText');
+
+	this.setText = function(searchTermLength, numberOfResults) {
+		if (numberOfResults > 0) {
+			element.text = '';
+		} else if (searchTermLength == 0) {
+			element.text(emptyText);
+		} else if (searchTermLength < minLength) {
+			element.text(moreCharsText);
+		} else {
+			element.text(noMatchText);
+		}
+	}
+}
+
 $(document).ready(function() {
 	$("div[name='proxyProxiesPanel']").each(function(i) {
 		var ppp = new proxyProxiesPanel(this);

webapp/web/templates/freemarker/body/accounts/userAccounts-myProxiesPanel.ftl

@@ -11,6 +11,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
     <br><br>
     <p>Add proxy:</p>
     <p><input type="text" name="proxySelectorAC" class="acSelector" size="35"></p>
+    <p><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>type here</span></p>
     <br><br>
     <p>Selected proxies:</p>