cancel autocomplete on submit, cancel autocomplete callback if new autocomplete is running

source/Ox.UI/js/Form/Input.js

@@ -359,6 +359,8 @@ Ox.Input = function(options, self) {
         Ox.Log('AUTO', 'autocomplete', oldValue, oldCursor)
 
         if (self.options.value || self.options.autocompleteReplaceCorrect) {
+            var id = Ox.uid();
+            self.autocompleteId = id;
             if (Ox.isFunction(self.options.autocomplete)) {
                 if (self.options.key) {
                     self.options.autocomplete(
@@ -370,7 +372,7 @@ Ox.Input = function(options, self) {
                     );
                 }
             } else {
-                autocompleteCallback(autocompleteFunction(self.options.value));
+                autocompleteCallback(autocompleteFunction());
             }
         }
         if (!self.options.value) {
@@ -392,6 +394,9 @@ Ox.Input = function(options, self) {
 
         function autocompleteCallback(values) {
 
+            if (self.autocompleteId != id) {
+                return;
+            }
             //Ox.Log('Form', 'autocompleteCallback', values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
 
             var length = self.options.value.length,
@@ -484,28 +489,6 @@ Ox.Input = function(options, self) {
 
     }
 
-    function constructAutocompleteMenu() {
-        return Ox.Menu({
-                element: self.$input,
-                id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
-                maxWidth: self.options.autocompleteSelectMaxWidth,
-                offset: {
-                    left: 4,
-                    top: 0
-                }
-            })
-            .addClass('OxAutocompleteMenu')
-            .bindEvent({
-                click: clickMenu,
-                key_enter: function() {
-                    if (self.$autocompleteMenu.is(':visible')) {
-                        self.$autocompleteMenu.hideMenu();
-                        submit();
-                    }
-                }
-            });
-    }
-
     function autovalidate() {
 
         var blur, oldCursor, oldValue;
@@ -664,16 +647,6 @@ Ox.Input = function(options, self) {
                 value: self.options.value
             });
         }
-        /*
-        self.options.value !== self.originalValue && that.triggerEvent('change', {
-            value: self.options.value
-        });
-        // fixme: for some reason, if options.type is set, no change event fires
-        // as a workaround, blur sends a value. remove later...
-        !self.cancelled && !self.submitted && that.triggerEvent('blur', {
-            value: self.options.value
-        });
-        */
     }
 
     function cancel() {
@@ -683,6 +656,10 @@ Ox.Input = function(options, self) {
         that.triggerEvent('cancel');
     }
 
+    function cancelAutocomplete() {
+        self.autocompleteId = null;
+    }
+
     function change() {
         // change gets invoked before blur
         self.options.value = self.$input.val();
@@ -733,6 +710,28 @@ Ox.Input = function(options, self) {
         self.options.autocompleteSelectSubmit && submit();
     }
 
+    function constructAutocompleteMenu() {
+        return Ox.Menu({
+                element: self.$input,
+                id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
+                maxWidth: self.options.autocompleteSelectMaxWidth,
+                offset: {
+                    left: 4,
+                    top: 0
+                }
+            })
+            .addClass('OxAutocompleteMenu')
+            .bindEvent({
+                click: clickMenu,
+                key_enter: function() {
+                    if (self.$autocompleteMenu.is(':visible')) {
+                        self.$autocompleteMenu.hideMenu();
+                        submit();
+                    }
+                }
+            });
+    }
+
     function cursor(start, end) {
         /*
         cursor()                returns [start, end]
@@ -899,6 +898,7 @@ Ox.Input = function(options, self) {
     }
 
     function submit() {
+        cancelAutocomplete();
         self.submitted = true;
         self.$input.blur();
         self.submitted = false;