add possibility to use another container for suggestion items list (e…

…xample: document.body)

awesomplete.base.css

@@ -16,7 +16,8 @@
     display: block;
 }
 
-.awesomplete > ul {
+.awesomplete > ul,
+ul.awesomplete-suggestion-list {
     position: absolute;
     left: 0;
     z-index: 1;
@@ -28,6 +29,7 @@
     background: #fff;
 }
 
-.awesomplete > ul:empty {
+.awesomplete > ul:empty,
+ul.awesomplete-suggestion-list:empty {
     display: none;
 }

awesomplete.js

@@ -28,7 +28,8 @@ var _ = function (input, o) {
 		filter: _.FILTER_CONTAINS,
 		sort: o.sort === false ? false : _.SORT_BYLENGTH,
 		item: _.ITEM,
-		replace: _.REPLACE
+		replace: _.REPLACE,
+		listContainer: _.CONTAINER
 	}, o);
 
 	this.index = -1;
@@ -42,7 +43,8 @@ var _ = function (input, o) {
 
 	this.ul = $.create("ul", {
 		hidden: "hidden",
-		inside: this.container
+		className: "awesomplete-suggestion-list",
+		inside: me.listContainer === _.CONTAINER ? me.container : me.listContainer
 	});
 
 	this.status = $.create("span", {
@@ -169,7 +171,11 @@ _.prototype = {
 	},
 
 	open: function () {
+		if (this.listContainer !== 'container') {
+			this.setListPosition();
+		}
 		this.ul.removeAttribute("hidden");
+
 		this.isOpened = true;
 
 		if (this.autoFirst && this.index === -1) {
@@ -179,6 +185,14 @@ _.prototype = {
 		$.fire(this.input, "awesomplete-open");
 	},
 
+	setListPosition: function () {
+		//get the bounding of the container to set the position of the suggestion list below
+		var boudingRect = this.container.getBoundingClientRect()
+		this.ul.style.top = (boudingRect.y + boudingRect.height) + 'px';
+		this.ul.style.left = boudingRect.x + 'px';
+		this.ul.style['min-width'] = boudingRect.width + 'px';
+	},
+
 	destroy: function() {
 		//remove events from the input and its form
 		$.unbind(this.input, this._events.input);
@@ -333,6 +347,8 @@ _.REPLACE = function (text) {
 	this.input.value = text.value;
 };
 
+_.CONTAINER = "container";
+
 _.DATA = function (item/*, input*/) { return item; };
 
 // Private functions