Allow user to specify pre-existing container element

awesomplete.css

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

awesomplete.js

@@ -22,6 +22,8 @@ var _ = function (input, o) {
 		minChars: 2,
 		maxItems: 10,
 		autoFirst: false,
+		container: null,
+		ul: null,
 		data: _.DATA,
 		filter: _.FILTER_CONTAINS,
 		sort: _.SORT_BYLENGTH,
@@ -33,17 +35,21 @@ var _ = function (input, o) {
 
 	// Create necessary elements
 
-	this.container = $.create("div", {
-		className: "awesomplete",
-		around: input
+	this.container = $(this.container) || document.createElement("div");
+	$.set(this.container, {
+		className: "awesomplete-container",
+		around: this.input
 	});
 
-	this.ul = $.create("ul", {
+	this.ul = $(this.ul) || document.createElement("ul");
+	$.set(this.ul, {
 		hidden: "hidden",
+		className: 'awesomplete-dropdown',
 		inside: this.container
 	});
 
-	this.status = $.create("span", {
+	this.status = document.createElement("span");
+	$.set(this.status, {
 		className: "visually-hidden",
 		role: "status",
 		"aria-live": "assertive",
@@ -277,7 +283,7 @@ _.SORT_BYLENGTH = function (a, b) {
 
 _.ITEM = function (text, input) {
 	var html = input === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
-	return $.create("li", {
+	return $.set(document.createElement("li"), {
 		innerHTML: html,
 		"aria-selected": "false"
 	});
@@ -342,9 +348,7 @@ function $$(expr, con) {
 	return slice.call((con || document).querySelectorAll(expr));
 }
 
-$.create = function(tag, o) {
-	var element = document.createElement(tag);
-
+$.set = function(element, o) {
 	for (var i in o) {
 		var val = o[i];
 
@@ -353,9 +357,14 @@ $.create = function(tag, o) {
 		}
 		else if (i === "around") {
 			var ref = $(val);
-			ref.parentNode.insertBefore(element, ref);
+			if (ref.parentNode && ref.parentNode !== element) {
+				ref.parentNode.insertBefore(element, ref);
+			}
 			element.appendChild(ref);
 		}
+		else if (i === "className") {
+			element.classList.add(val);
+		}
 		else if (i in element) {
 			element[i] = val;
 		}

index.html

@@ -206,6 +206,20 @@ <h1>Customize</h1>
 				<td>Boolean</td>
 				<td>false</td>
 			</tr>
+			<tr>
+				<td><code>container</code></td>
+				<td><code>data-container</code></td>
+				<td>Selector pointing to the DOM element wrapping the input.</td>
+				<td>String</td>
+				<td>null</td>
+			</tr>
+			<tr>
+				<td><code>ul</code></td>
+				<td><code>data-ul</code></td>
+				<td>Selector pointing to a DOM element where autocomplete results will be inserted.</td>
+				<td>String</td>
+				<td>null</td>
+			</tr>
 		</tbody>
 	</table>
 

test/helpers/createSpec.js → test/helpers/setSpec.js

@@ -1,29 +1,29 @@
-describe("Awesomplete.$.create", function () {
+describe("Awesomplete.$.set", function () {
 
 	$.fixture("options");
 
-	subject(function () { return Awesomplete.$.create(this.tag, this.options || {}) });
+	subject(function () { return Awesomplete.$.set(this.tag, this.options || {}) });
 
-	def("tag", "div");
+	def("tag", document.createElement("div"));
 
-	it("creates DOM element", function () {
+	it("sets DOM element", function () {
 		expect(this.subject instanceof HTMLElement).toBe(true);
 	});
 
 	describe("with various tag names", function () {
-		it("creates <ul> element", function () {
-			this.tag = "ul";
+		it("sets <ul> element", function () {
+			this.tag = document.createElement("ul");
 			expect(this.subject.tagName).toEqual("UL");
 		});
 
-		it("creates <li> element", function () {
-			this.tag = "li";
+		it("sets <li> element", function () {
+			this.tag = document.createElement("li");
 			expect(this.subject.tagName).toEqual("LI");
 		});
 	});
 
 	describe("without options", function () {
-		it("creates element without any attributes", function () {
+		it("sets element without any attributes", function () {
 			expect(this.subject.attributes.length).toEqual(0);
 		});
 	});

test/init/htmlSpec.js

@@ -16,7 +16,7 @@ describe("Html modifications", function () {
 	describe("HTML tweaks", function () {
 		it("creates container", function () {
 			expect(this.subject.container instanceof HTMLElement).toBe(true);
-			expect(this.subject.container.className).toBe("awesomplete");
+			expect(this.subject.container.className).toBe("awesomplete-container");
 		});
 
 		it("places input inside container", function () {