Autocomplete: Added support for contenteditable elements. Fixes #6914 - Autocomplete...

diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html
index ef9d64baf4f4d6c9cd28fe790d2e3fa64e796229..c4c3d8745e277effbe8f845e98da6b5773971443 100644 (file)
--- a/tests/unit/autocomplete/autocomplete.html
+++ b/tests/unit/autocomplete/autocomplete.html
@@ -40,6 +40,7 @@
 
        <div id="ac-wrap1" class="ac-wrap"></div>
        <div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div>
+       <div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div>
 </div>
 
 </body>

diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js
index 95a86425c361d253bdbc2f66d9d7b4febe770fb0..b0ee1acb4e6db33b5075ef515016a8f08e14c8f3 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_events.js
+++ b/tests/unit/autocomplete/autocomplete_events.js
@@ -51,6 +51,46 @@ test("all events", function() {
        }, 50);
 });
 
+test("all events - contenteditable", function() {
+       expect(12);
+       var ac = $("#autocomplete-contenteditable").autocomplete({
+               delay: 0,
+               source: data,
+               search: function(event) {
+                       same(event.type, "autocompletesearch");
+               },
+               open: function(event) {
+                       same(event.type, "autocompleteopen");
+               },
+               focus: function(event, ui) {
+                       same(event.type, "autocompletefocus");
+                       same(ui.item, {label:"java", value:"java"});
+               },
+               close: function(event) {
+                       same(event.type, "autocompleteclose");
+                       same( $(".ui-menu:visible").length, 0 );
+               },
+               select: function(event, ui) {
+                       same(event.type, "autocompleteselect");
+                       same(ui.item, {label:"java", value:"java"});
+               },
+               change: function(event, ui) {
+                       same(event.type, "autocompletechange");
+                       same(ui.item, {label:"java", value:"java"});
+                       same( $(".ui-menu:visible").length, 0 );
+                       start();
+               }
+       });
+       stop();
+       ac.focus().text("ja").keydown();
+       setTimeout(function() {
+               same( $(".ui-menu:visible").length, 1 );
+               ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+               ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
+               $.browser.msie ? ac.simulate("blur") : ac.blur();
+       }, 50);
+});
+
 test("change without selection", function() {
        expect(2);
        stop();

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index c35d8180c5a49daa3d382379f4039c243d10084e..32959b3c547a969462484eac5b1e018daec75803 100644 (file)
--- a/ui/jquery.ui.autocomplete.js
+++ b/ui/jquery.ui.autocomplete.js
@@ -39,6 +39,8 @@ $.widget( "ui.autocomplete", {
                        doc = this.element[ 0 ].ownerDocument,
                        suppressKeyPress;
 
+               this.valueMethod = this.element[ this.element.is( "input" ) ? "val" : "text" ];
+
                this.element
                        .addClass( "ui-autocomplete-input" )
                        .attr( "autocomplete", "off" )
@@ -89,7 +91,7 @@ $.widget( "ui.autocomplete", {
                                        self.menu.select( event );
                                        break;
                                case keyCode.ESCAPE:
-                                       self.element.val( self.term );
+                                       self._value( self.term );
                                        self.close( event );
                                        break;
                                default:
@@ -97,7 +99,7 @@ $.widget( "ui.autocomplete", {
                                        clearTimeout( self.searching );
                                        self.searching = setTimeout(function() {
                                                // only search if the value has changed
-                                               if ( self.term != self.element.val() ) {
+                                               if ( self.term != self._value() ) {
                                                        self.selectedItem = null;
                                                        self.search( null, event );
                                                }
@@ -117,7 +119,7 @@ $.widget( "ui.autocomplete", {
                                }
 
                                self.selectedItem = null;
-                               self.previous = self.element.val();
+                               self.previous = self._value();
                        })
                        .bind( "blur.autocomplete", function( event ) {
                                if ( self.options.disabled ) {
@@ -170,7 +172,7 @@ $.widget( "ui.autocomplete", {
                                        if ( false !== self._trigger( "focus", event, { item: item } ) ) {
                                                // use value to match what will end up in the input, if it was a key event
                                                if ( /^key/.test(event.originalEvent.type) ) {
-                                                       self.element.val( item.value );
+                                                       self._value( item.value );
                                                }
                                        }
                                },
@@ -192,11 +194,11 @@ $.widget( "ui.autocomplete", {
                                        }
 
                                        if ( false !== self._trigger( "select", event, { item: item } ) ) {
-                                               self.element.val( item.value );
+                                               self._value( item.value );
                                        }
                                        // reset the term after the select event
                                        // this allows custom select handling to work properly
-                                       self.term = self.element.val();
+                                       self.term = self._value();
 
                                        self.close( event );
                                        self.selectedItem = item;
@@ -205,8 +207,8 @@ $.widget( "ui.autocomplete", {
                                        // don't set the value of the text field if it's already correct
                                        // this prevents moving the cursor unnecessarily
                                        if ( self.menu.element.is(":visible") &&
-                                               ( self.element.val() !== self.term ) ) {
-                                               self.element.val( self.term );
+                                               ( self._value() !== self.term ) ) {
+                                               self._value( self.term );
                                        }
                                }
                        })
@@ -279,10 +281,10 @@ $.widget( "ui.autocomplete", {
        },
 
        search: function( value, event ) {
-               value = value != null ? value : this.element.val();
+               value = value != null ? value : this._value();
 
                // always save the actual value, not the one passed as an argument
-               this.term = this.element.val();
+               this.term = this._value();
 
                if ( value.length < this.options.minLength ) {
                        return this.close( event );
@@ -327,7 +329,7 @@ $.widget( "ui.autocomplete", {
        },
        
        _change: function( event ) {
-               if ( this.previous !== this.element.val() ) {
+               if ( this.previous !== this._value() ) {
                        this._trigger( "change", event, { item: this.selectedItem } );
                }
        },
@@ -397,7 +399,7 @@ $.widget( "ui.autocomplete", {
                }
                if ( this.menu.first() && /^previous/.test(direction) ||
                                this.menu.last() && /^next/.test(direction) ) {
-                       this.element.val( this.term );
+                       this._value( this.term );
                        this.menu.deactivate();
                        return;
                }
@@ -406,6 +408,10 @@ $.widget( "ui.autocomplete", {
 
        widget: function() {
                return this.menu.element;
+       },
+
+       _value: function( value ) {
+               return this.valueMethod.apply( this.element, arguments );
        }
 });