container function to generate container element (#17143)

I've added a container function to options that will allow client to provide a different container element. The default version of container function creates container element as before. I believe this is in line with the item function that customizes creating item elements.

This addresses my use case where container element cannot reuse the input element parent
because the input parent clips container's content. It also addresses a case when input element has to be next to it's original siblings.

It also solves #17086 & #16718

Thank you for consideration.

Author: melitele

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>