Autocomplete: Fixed setting of valueMethod for textareas. Fixes #7674 - Autocomplete doesn't work with textareas.

This commit is contained in:
Scott González 2011-08-30 20:45:48 -04:00
parent 87f78973b9
commit c5ba0535cf
3 changed files with 71 additions and 105 deletions

View File

@ -39,6 +39,7 @@
<div id="ac-wrap1" class="ac-wrap"></div> <div id="ac-wrap1" class="ac-wrap"></div>
<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo"></div> <div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo"></div>
<div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div> <div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div>
<textarea id="autocomplete-textarea"></textarea>
</div> </div>
</body> </body>

View File

@ -4,110 +4,75 @@ module( "autocomplete: events" );
var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ]; var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ];
asyncTest( "all events", function() { $.each([
expect( 13 ); {
var element = $( "#autocomplete" ) type: "input",
.autocomplete({ selector: "#autocomplete",
autoFocus: false, valueMethod: "val"
delay: 0, },
source: data, {
search: function( event ) { type: "textarea",
equal( event.originalEvent.type, "keydown", "search originalEvent" ); selector: "#autocomplete-textarea",
}, valueMethod: "val"
response: function( event, ui ) { },
deepEqual( ui.content, [ {
{ label: "Clojure", value: "Clojure" }, type: "contenteditable",
{ label: "Java", value: "Java" }, selector: "#autocomplete-contenteditable",
{ label: "JavaScript", value: "JavaScript" } valueMethod: "text"
], "response ui.content" ); }
ui.content.splice( 0, 1 ); ], function( i, settings ) {
}, asyncTest( "all events - " + settings.type, function() {
open: function( event ) { expect( 13 );
ok( menu.is( ":visible" ), "menu open on open" ); var element = $( settings.selector )
}, .autocomplete({
focus: function( event, ui ) { autoFocus: false,
equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); delay: 0,
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); source: data,
}, search: function( event ) {
close: function( event ) { equal( event.originalEvent.type, "keydown", "search originalEvent" );
equal( event.originalEvent.type, "menuselect", "close originalEvent" ); },
ok( menu.is( ":hidden" ), "menu closed on close" ); response: function( event, ui ) {
}, deepEqual( ui.content, [
select: function( event, ui ) { { label: "Clojure", value: "Clojure" },
equal( event.originalEvent.type, "menuselect", "select originalEvent" ); { label: "Java", value: "Java" },
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); { label: "JavaScript", value: "JavaScript" }
}, ], "response ui.content" );
change: function( event, ui ) { ui.content.splice( 0, 1 );
equal( event.originalEvent.type, "blur", "change originalEvent" ); },
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); open: function( event ) {
ok( menu.is( ":hidden" ), "menu closed on change" ); ok( menu.is( ":visible" ), "menu open on open" );
start(); },
} focus: function( event, ui ) {
}), equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
menu = element.autocomplete( "widget" ); deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
element.focus().val( "j" ).keydown(); close: function( event ) {
setTimeout(function() { equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":visible" ), "menu is visible after delay" ); ok( menu.is( ":hidden" ), "menu closed on close" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); },
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); select: function( event, ui ) {
// blurring through jQuery causes a bug in IE 6 which causes the equal( event.originalEvent.type, "menuselect", "select originalEvent" );
// autocompletechange event to occur twice deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
element[0].blur(); },
}, 50 ); change: function( event, ui ) {
}); equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
asyncTest( "all events - contenteditable", function() { ok( menu.is( ":hidden" ), "menu closed on change" );
expect( 13 ); start();
var element = $( "#autocomplete-contenteditable" ) }
.autocomplete({ }),
autoFocus: false, menu = element.autocomplete( "widget" );
delay: 0,
source: data, element.focus()[ settings.valueMethod ]( "j" ).keydown();
search: function( event ) { setTimeout(function() {
equal( event.originalEvent.type, "keydown", "search originalEvent" ); ok( menu.is( ":visible" ), "menu is visible after delay" );
}, element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
response: function( event, ui ) { element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
deepEqual( ui.content, [ // blurring through jQuery causes a bug in IE 6 which causes the
{ label: "Clojure", value: "Clojure" }, // autocompletechange event to occur twice
{ label: "Java", value: "Java" }, element[0].blur();
{ label: "JavaScript", value: "JavaScript" } }, 50 );
], "response ui.content" ); });
ui.content.splice( 0, 1 );
},
open: function( event ) {
ok( menu.is( ":visible" ), "menu open on open" );
},
focus: function( event, ui ) {
equal( event.originalEvent.type, "menufocus", "focus originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" );
},
close: function( event ) {
equal( event.originalEvent.type, "menuselect", "close originalEvent" );
ok( menu.is( ":hidden" ), "menu closed on close" );
},
select: function( event, ui ) {
equal( event.originalEvent.type, "menuselect", "select originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" );
},
change: function( event, ui ) {
equal( event.originalEvent.type, "blur", "change originalEvent" );
deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" );
ok( menu.is( ":hidden" ), "menu closed on change" );
start();
}
}),
menu = element.autocomplete( "widget" );
element.focus().text( "j" ).keydown();
setTimeout(function() {
ok( menu.is( ":visible" ), "menu is visible after delay" );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
// TODO: blurring through jQuery causes a bug in IE 6 which causes the
// autocompletechange event to occur twice
element[0].blur();
}, 50 );
}); });
asyncTest( "change without selection", function() { asyncTest( "change without selection", function() {

View File

@ -51,7 +51,7 @@ $.widget( "ui.autocomplete", {
suppressKeyPress, suppressKeyPress,
suppressInput; suppressInput;
this.valueMethod = this.element[ this.element.is( "input" ) ? "val" : "text" ]; this.valueMethod = this.element[ this.element.is( "input,textarea" ) ? "val" : "text" ];
this.element this.element
.addClass( "ui-autocomplete-input" ) .addClass( "ui-autocomplete-input" )