Autocomplete: Add classes option

Ref #7053
Ref gh-1411

3 files changed, 19 insertions, 10 deletions

diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html
index e7ce6f6d5..fa3527dac 100644
--- 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 c79e04dd9..4787011a1 100644
--- 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 60d69307e..3453ee399 100644
--- 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 );
 	},