Allow preexisting wrapper and custom class names

Closes LeaVerou#16718

awesomplete.css

@@ -5,16 +5,16 @@
 	clip: rect(0, 0, 0, 0);
 }
 
-div.awesomplete {
+.awesomplete-wrapper {
 	display: inline-block;
 	position: relative;
 }
 
-div.awesomplete > input {
+.awesomplete-wrapper > input {
 	display: block;
 }
 
-div.awesomplete > ul {
+.awesomplete-wrapper > ul {
 	position: absolute;
 	left: 0;
 	z-index: 1;
@@ -31,19 +31,19 @@ div.awesomplete > ul {
 	text-shadow: none;
 }
 
-div.awesomplete > ul[hidden],
-div.awesomplete > ul:empty {
+.awesomplete-wrapper > ul[hidden],
+.awesomplete-wrapper > ul:empty {
 	display: none;
 }
 
 @supports (transform: scale(0)) {
-	div.awesomplete > ul {
+	.awesomplete-wrapper > ul {
 		transition: .3s cubic-bezier(.4,.2,.5,1.4);
 		transform-origin: 1.43em -.43em;
 	}
 
-	div.awesomplete > ul[hidden],
-	div.awesomplete > ul:empty {
+	.awesomplete-wrapper > ul[hidden],
+	.awesomplete-wrapper > ul:empty {
 		opacity: 0;
 		transform: scale(0);
 		display: block;
@@ -52,7 +52,7 @@ div.awesomplete > ul:empty {
 }
 
 	/* Pointer */
-	div.awesomplete > ul:before {
+	.awesomplete-wrapper > ul:before {
 		content: "";
 		position: absolute;
 		top: -.43em;
@@ -67,31 +67,31 @@ div.awesomplete > ul:empty {
 		transform: rotate(45deg);
 	}
 
-	div.awesomplete > ul > li {
+	.awesomplete-wrapper > ul > li {
 		position: relative;
 		padding: .2em .5em;
 		cursor: pointer;
 	}
 
-	div.awesomplete > ul > li:hover {
+	.awesomplete-wrapper > ul > li:hover {
 		background: hsl(200, 40%, 80%);
 		color: black;
 	}
 
-	div.awesomplete > ul > li[aria-selected="true"] {
+	.awesomplete-wrapper > ul > li[aria-selected="true"] {
 		background: hsl(205, 40%, 40%);
 		color: white;
 	}
 
-		div.awesomplete mark {
+		.awesomplete-wrapper mark {
 			background: hsl(65, 100%, 50%);
 		}
 
-		div.awesomplete li:hover mark {
+		.awesomplete-wrapper li:hover mark {
 			background: hsl(68, 100%, 41%);
 		}
 
-		div.awesomplete li[aria-selected="true"] mark {
+		.awesomplete-wrapper li[aria-selected="true"] mark {
 			background: hsl(86, 100%, 21%);
 			color: inherit;
-		}
+		}

awesomplete.js

@@ -21,6 +21,9 @@ var _ = function (input, o) {
 	configure.call(this, {
 		minChars: 2,
 		maxItems: 10,
+    containerClass: "awesomplete-wrapper",
+    ulClass: null,
+    statusClass: "visually-hidden",
 		autoFirst: false,
 		filter: _.FILTER_CONTAINS,
 		sort: _.SORT_BYLENGTH,
@@ -40,18 +43,20 @@ var _ = function (input, o) {
 
 	// Create necessary elements
 
-	this.container = $.create("div", {
-		className: "awesomplete",
-		around: input
-	});
+  this.container = $("." + this.containerClass, this.input.parentNode) ||
+    $.create("div", {
+      className: this.containerClass,
+      around: input
+    });
 
 	this.ul = $.create("ul", {
+    className: this.ulClass || "",
 		hidden: "hidden",
 		inside: this.container
 	});
 
 	this.status = $.create("span", {
-		className: "visually-hidden",
+		className: this.statusClass,
 		role: "status",
 		"aria-live": "assertive",
 		"aria-relevant": "additions",
@@ -140,7 +145,7 @@ _.prototype = {
 	},
 
 	get opened() {
-		return this.ul && this.ul.getAttribute("hidden") == null;
+		return this.ul && this.ul.getAttribute("hidden") === null;
 	},
 
 	close: function () {
@@ -353,7 +358,7 @@ $.fire = function(target, type, properties) {
 
 $.regExpEscape = function (s) {
 	return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
-}
+};
 
 // Initialization
 

index.html

@@ -47,6 +47,15 @@ <h1>Basic usage</h1>
 <p>Before you try anything, you need to include <code>awesomplete.css</code> and <code>awesomplete.js</code> in your page, via the usual <code>&lt;link rel="stylesheet" href="awesomplete.css" /></code> and <code>&lt;script src="awesomplete.js" async>&lt;/script></code> tags.</p>
 
 <p>For the autocomplete, you just need an <code>&lt;input></code> text field (might work on <code>&lt;textarea></code> and elements with <code>contentEditable</code>, but that hasn’t been tested). Add <code>class="awesomplete"</code> for it to be <strong>automatically processed</strong> (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization.</p>
+
+<p><strong>Note:</strong> By default, Awesomplete will wrap your input in a div with a class of 'awesomplete-wrapper'. If other elements need to stay a sibling of your input, such as a label, you can simply place the input in an element with the that class beforehand, and Awesomplete will pick it up:</p>
+
+<pre class="language-markup"><code>&lt;div class="awesomplete-wrapper">
+  &lt;input class="awesomplete" 
+    data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
+  &lt;label>My label&lt;/label>
+&lt;/div></code></pre>
+
 <p>There are many ways <strong>to link an input to a list of suggestions</strong>. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:</p>
 
 <pre class="language-markup"><code>&lt;input class="awesomplete" list="mylist" />
@@ -176,6 +185,30 @@ <h1>Customize</h1>
 				<td>Number</td>
 				<td>10</td>
 			</tr>
+			<tr>
+				<td><code>containerClass</code></td>
+				<td><code>data-containerclass</code></td>
+				<td>The class of the element wrapping the input. If no element with is class is found wrapping the input, one will be created.</td>
+				<td>String</td>
+				<td>"awesomplete-wrapper"</td>
+			</tr>
+			<tr>
+				<td><code>ulClass</code></td>
+				<td><code>data-ulclass</code></td>
+        <td>The class that will be attached to the results <code>ul</code></td>
+        <td><ul>
+          <li>String</li>
+          <li>Null</li>
+        </ul></td>
+				<td>null</td>
+			</tr>
+			<tr>
+				<td><code>statusClass</code></td>
+				<td><code>data-statusclass</code></td>
+				<td>The class that will be attached to the status class</td>
+				<td>String</td>
+				<td>"visually-hihdden"</td>
+			</tr>
 			<tr>
 				<td><code>autoFirst</code></td>
 				<td><code>data-autofirst</code></td>