- #23506: Fix autocomplete throbber firing on wrong events.

- Add simple throbber to drupal.css

3 files changed, 17 insertions, 4 deletions

diff --git a/misc/autocomplete.js b/misc/autocomplete.js
index 534b2fe4f..658203dac 100644
--- a/misc/autocomplete.js
+++ b/misc/autocomplete.js
@@ -44,7 +44,6 @@ function jsAC(input, db) {
   var ac = this;
   this.input = input;
   this.db = db;
-  this.db.owner = this;
   this.input.onkeydown = function (event) { return ac.onkeydown(this, event); };
   this.input.onkeyup = function (event) { ac.onkeyup(this, event) };
   this.input.onblur = function () { ac.hidePopup() };
@@ -181,7 +180,7 @@ jsAC.prototype.populatePopup = function () {
   this.popup.style.top   = (pos.y + this.input.offsetHeight) +'px';
   this.popup.style.left  = pos.x +'px';
   this.popup.style.width = (this.input.offsetWidth - 4) +'px';
-  addClass(this.input, 'throbbing');
+  this.db.owner = this;
   this.db.search(this.input.value);
 }
 
@@ -241,7 +240,10 @@ ACDB.prototype.search = function(searchString) {
     clearTimeout(this.timer);
   }
   var db = this;
-  this.timer = setTimeout(function() { HTTPGet(db.uri +'/'+ searchString +'/'+ db.max, db.receive, db); }, this.delay);
+  this.timer = setTimeout(function() {
+    addClass(db.owner.input, 'throbbing');
+    HTTPGet(db.uri +'/'+ searchString +'/'+ db.max, db.receive, db);
+  }, this.delay);
 }
 
 /**
@@ -249,6 +251,7 @@ ACDB.prototype.search = function(searchString) {
  */
 ACDB.prototype.receive = function(string, xmlhttp, acdb) {
   if (xmlhttp.status != 200) {
+    removeClass(acdb.owner.input, 'throbbing');
     return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri);
   }
   // Split into array of key->value pairs
diff --git a/misc/drupal.css b/misc/drupal.css
index 618b8ffd7..cbd039428 100644
--- a/misc/drupal.css
+++ b/misc/drupal.css
@@ -555,6 +555,7 @@ ul.secondary a.active {
 /*
 ** Autocomplete styles
 */
+/* Suggestion list */
 #autocomplete {
   position: absolute;
   border: 1px solid;
@@ -575,4 +576,13 @@ ul.secondary a.active {
   background: #0072b9;
   color: #fff;
 }
-
+/* Animated throbber */
+input.form-autocomplete {
+  background: url('throbber.gif') no-repeat 100% 2px;
+}
+input.form-autocomplete > * {
+  margin-right: 17px;
+}
+input.throbbing {
+  background-position: 100% -18px;
+}
diff --git a/misc/throbber.gif b/misc/throbber.gif
new file mode 100644
index 000000000..4352e64e8
--- /dev/null
+++ b/misc/throbber.gif