Autocomplete: Add classes option

Ref #7053
Ref gh-1411
This commit is contained in:
Alexander Schmitz 2015-02-27 15:11:33 -05:00
parent 7c6a7d71e9
commit cff1fb2a13
3 changed files with 19 additions and 10 deletions

View File

@ -9,6 +9,7 @@
<script src="../../../external/qunit/qunit.js"></script> <script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script> <script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script> <script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script> <script>
TestHelpers.loadResources({ TestHelpers.loadResources({
css: [ "core", "menu", "autocomplete" ], css: [ "core", "menu", "autocomplete" ],

View File

@ -2,6 +2,15 @@
module( "autocomplete: core" ); module( "autocomplete: core" );
test( "markup structure", function( assert ) {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete(),
menu = element.autocomplete( "widget" );
assert.hasClasses( element, "ui-autocomplete-input" );
assert.hasClasses( menu, "ui-autocomplete ui-widget ui-widget-content" );
});
test( "prevent form submit on enter when menu is active", function() { test( "prevent form submit on enter when menu is active", function() {
expect( 2 ); expect( 2 );
var event, var event,

View File

@ -40,6 +40,7 @@ $.widget( "ui.autocomplete", {
options: { options: {
appendTo: null, appendTo: null,
autoFocus: false, autoFocus: false,
classes: {},
delay: 300, delay: 300,
minLength: 1, minLength: 1,
position: { position: {
@ -87,9 +88,8 @@ $.widget( "ui.autocomplete", {
this.valueMethod = this.element[ isTextarea || isInput ? "val" : "text" ]; this.valueMethod = this.element[ isTextarea || isInput ? "val" : "text" ];
this.isNewMenu = true; this.isNewMenu = true;
this.element this._addClass( "ui-autocomplete-input" );
.addClass( "ui-autocomplete-input" ) this.element.attr( "autocomplete", "off" );
.attr( "autocomplete", "off" );
this._on( this.element, { this._on( this.element, {
keydown: function( event ) { keydown: function( event ) {
@ -210,7 +210,6 @@ $.widget( "ui.autocomplete", {
this._initSource(); this._initSource();
this.menu = $( "<ul>" ) this.menu = $( "<ul>" )
.addClass( "ui-autocomplete ui-front" )
.appendTo( this._appendTo() ) .appendTo( this._appendTo() )
.menu({ .menu({
// disable ARIA support, the live region takes care of that // disable ARIA support, the live region takes care of that
@ -219,6 +218,7 @@ $.widget( "ui.autocomplete", {
.hide() .hide()
.menu( "instance" ); .menu( "instance" );
this._addClass( this.menu.element, "ui-autocomplete", "ui-front" );
this._on( this.menu.element, { this._on( this.menu.element, {
mousedown: function( event ) { mousedown: function( event ) {
// prevent moving focus out of the text field // prevent moving focus out of the text field
@ -315,9 +315,10 @@ $.widget( "ui.autocomplete", {
"aria-live": "assertive", "aria-live": "assertive",
"aria-relevant": "additions" "aria-relevant": "additions"
}) })
.addClass( "ui-helper-hidden-accessible" )
.appendTo( this.document[ 0 ].body ); .appendTo( this.document[ 0 ].body );
this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );
// turning off autocomplete prevents the browser from remembering the // turning off autocomplete prevents the browser from remembering the
// value when navigating through history, so we re-enable autocomplete // value when navigating through history, so we re-enable autocomplete
// if the page is unloaded before the widget is destroyed. #7790 // if the page is unloaded before the widget is destroyed. #7790
@ -330,9 +331,7 @@ $.widget( "ui.autocomplete", {
_destroy: function() { _destroy: function() {
clearTimeout( this.searching ); clearTimeout( this.searching );
this.element this.element.removeAttr( "autocomplete" );
.removeClass( "ui-autocomplete-input" )
.removeAttr( "autocomplete" );
this.menu.element.remove(); this.menu.element.remove();
this.liveRegion.remove(); this.liveRegion.remove();
}, },
@ -436,7 +435,7 @@ $.widget( "ui.autocomplete", {
_search: function( value ) { _search: function( value ) {
this.pending++; this.pending++;
this.element.addClass( "ui-autocomplete-loading" ); this._addClass( "ui-autocomplete-loading" );
this.cancelSearch = false; this.cancelSearch = false;
this.source( { term: value }, this._response() ); this.source( { term: value }, this._response() );
@ -452,7 +451,7 @@ $.widget( "ui.autocomplete", {
this.pending--; this.pending--;
if ( !this.pending ) { if ( !this.pending ) {
this.element.removeClass( "ui-autocomplete-loading" ); this._removeClass( "ui-autocomplete-loading" );
} }
}, this ); }, this );
}, },