diff --git a/awesomplete.js b/awesomplete.js index 32a9440e..daaa8838 100644 --- a/awesomplete.js +++ b/awesomplete.js @@ -32,6 +32,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 +41,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 +201,13 @@ _.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; + if (this.input.parentNode === this.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 +351,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"), "$&"); return $.create("li", { diff --git a/index.html b/index.html index 17ea221b..b0caedc4 100644 --- a/index.html +++ b/index.html @@ -241,6 +241,12 @@

Extend

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