Fix yourlabs#244: Added ajax loading in input.autocomplete

jrwagz · Jan 27, 2014 · a231c0e · a231c0e
1 parent 7fd96b1
commit a231c0e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/autocomplete_light/static/autocomplete_light/autocomplete.js b/autocomplete_light/static/autocomplete_light/autocomplete.js
@@ -560,6 +560,8 @@ yourlabs.Autocomplete.prototype.fetch = function() {
 
 // Wrapped ajax call to use with setTimeout in fetch().
 yourlabs.Autocomplete.prototype.makeXhr = function() {
+    this.input.addClass('xhr-pending');
+
     this.xhr = $.ajax(this.url, {
         type: "GET",
         data: this.data,
@@ -569,6 +571,8 @@ yourlabs.Autocomplete.prototype.makeXhr = function() {
 
 // Callback for the ajax response.
 yourlabs.Autocomplete.prototype.fetchComplete = function(jqXHR, textStatus) {
+    this.input.removeClass('xhr-pending');
+
     if (this.xhr == jqXHR) this.xhr = false;
     if (textStatus == 'abort') return;
     this.show(jqXHR.responseText);

diff --git a/autocomplete_light/static/autocomplete_light/style.css b/autocomplete_light/static/autocomplete_light/style.css
@@ -99,6 +99,12 @@ input.autocomplete {
     vertical-align: top;
 }
 
+input.autocomplete.xhr-pending {
+    background-image: url('xhr-pending.gif');
+    background-repeat: no-repeat;
+    background-position: right;
+}
+
 .autocomplete-light-widget.yourlabs-autocomplete {
     position: absolute;
     top: 100%;

diff --git a/autocomplete_light/static/autocomplete_light/xhr-pending.gif b/autocomplete_light/static/autocomplete_light/xhr-pending.gif
diff --git a/autocomplete_light/tests/widget.py b/autocomplete_light/tests/widget.py
@@ -213,6 +213,13 @@ def test_autocomplete_shows_up(self):
     def test_autocomplete_has_four_choices(self):
         self.assertEqual(4, len(self.autocomplete_choices()))
 
+    def test_xhr_pending(self):
+        self.selenium.find_element_by_css_selector(
+            'input.xhr-pending[name=%s-autocomplete]' % self.autocomplete_name)
+
+        self.selenium.find_element_by_css_selector(
+            'input:not(.xhr-pending)[name=%s-autocomplete]' % self.autocomplete_name)
+
 
 class SelectChoiceInEmptyFormTestCase(WidgetTestCase):
     def setup_test_case(self):