container function to generate container element

addresses a use case where container element cannot reuse input element parent
because input parent clips container content

also solves LeaVerou#17086 & LeaVerou#16718

Author: Natalia Kowalczyk

awesomplete.js

@@ -23,7 +23,9 @@ var _ = function (input, o) {
 	this.input.setAttribute("aria-owns", "awesomplete_list_" + this.count);
 	this.input.setAttribute("role", "combobox");
 
-	o = o || {};
+	// store constructor options in case we need to distinguish
+	// between default and customized behavior later on
+	this.options = o = o || {};
 
 	configure(this, {
 		minChars: 2,
@@ -32,6 +34,7 @@ var _ = function (input, o) {
 		data: _.DATA,
 		filter: _.FILTER_CONTAINS,
 		sort: o.sort === false ? false : _.SORT_BYLENGTH,
+		container: _.CONTAINER,
 		item: _.ITEM,
 		replace: _.REPLACE
 	}, o);
@@ -40,10 +43,7 @@ var _ = function (input, o) {
 
 	// Create necessary elements
 
-	this.container = $.create("div", {
-		className: "awesomplete",
-		around: input
-	});
+	this.container = this.container(input);
 
 	this.ul = $.create("ul", {
 		hidden: "hidden",
@@ -203,11 +203,14 @@ _.prototype = {
 		$.unbind(this.input, this._events.input);
 		$.unbind(this.input.form, this._events.form);
 
-		//move the input out of the awesomplete container and remove the container and its children
-		var parentNode = this.container.parentNode;
+		// cleanup container if it was created by Awesomplete but leave it alone otherwise
+		if (!this.options.container) {
+			//move the input out of the awesomplete container and remove the container and its children
+			var parentNode = this.container.parentNode;
 
-		parentNode.insertBefore(this.input, this.container);
-		parentNode.removeChild(this.container);
+			parentNode.insertBefore(this.input, this.container);
+			parentNode.removeChild(this.container);
+		}
 
 		//remove autocomplete and aria-autocomplete attributes
 		this.input.removeAttribute("autocomplete");
@@ -351,6 +354,13 @@ _.SORT_BYLENGTH = function (a, b) {
 	return a < b? -1 : 1;
 };
 
+_.CONTAINER = function (input) {
+	return $.create("div", {
+		className: "awesomplete",
+		around: input
+	});
+}
+
 _.ITEM = function (text, input, item_id) {
 	var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
 	return $.create("li", {

index.html

@@ -241,6 +241,12 @@ <h1>Extend</h1>
 				<td>Sort function (will be passed directly to <code>Array.prototype.sort()</code>) to sort the items after they have been filtered and before they are truncated and converted to HTML elements. If value is <code>false</code>, sorting will be disabled.</td>
 				<td>Sorted by length first, order second.</td>
 			</tr>
+			<tr>
+				<td><code>container</code></td>
+				<td>Controls how list container element is generated.</td>
+				<td>Function that takes one parameter, the user’s input and returns an element.</td>
+				<td>Generates <code>&lt;div></code> with class <code>awesomplete</code></td>
+			</tr>
 			<tr>
 				<td><code>item</code></td>
 				<td>Controls how list items are generated.</td>