diff --git a/source/Ox.UI/js/Form/Input.js b/source/Ox.UI/js/Form/Input.js index d44eaffb..9d068e8c 100644 --- a/source/Ox.UI/js/Form/Input.js +++ b/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;