diff --git a/awesomplete.js b/awesomplete.js index 32a9440e..a7343c2c 100644 --- a/awesomplete.js +++ b/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"), "$&"); return $.create("li", { diff --git a/index.html b/index.html index 17ea221b..b386bf5d 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 is 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.