Autocomplete: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html
index e7ce6f6d5a106927fcb33d08337ac118c51932fd..fa3527dac6b8e2062abe71225def9b3788b25ecb 100644 (file)
--- a/tests/unit/autocomplete/autocomplete.html
+++ b/tests/unit/autocomplete/autocomplete.html
@@ -9,6 +9,7 @@
        <script src="../../../external/qunit/qunit.js"></script>
        <script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
        <script src="../testsuite.js"></script>
+       <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
        <script>
        TestHelpers.loadResources({
                css: [ "core", "menu", "autocomplete" ],

diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js
index c79e04dd9d627a4ac0bf168200c26005b45bf28b..4787011a1b72da7712252c50c5ee6b31a5f14c81 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_core.js
+++ b/tests/unit/autocomplete/autocomplete_core.js
@@ -2,6 +2,15 @@
 
 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() {
        expect( 2 );
        var event,

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