select2-rails 0.0.7 → 0.0.9

data/lib/select2-rails/version.rb

@@ -1,5 +1,5 @@
 module Select2
   module Rails
-    VERSION = "0.0.7"
+    VERSION = "0.0.9"
   end
 end

data/vendor/assets/javascripts/select2.js

@@ -1,7 +1,7 @@
 /*
  Copyright 2012 Igor Vaynberg
-
- Version: @@ver@@ Timestamp: @@timestamp@@
+ 
+ Version: 2.1 Timestamp: Tue Jun 12 19:50:25 PDT 2012
 
  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
  compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
@@ -12,26 +12,6 @@
  distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and limitations under the License.
  */
- (function ($) {
- 	if(typeof $.fn.each2 == "undefined"){
- 		$.fn.extend({
- 			/*
-			* 4-10 times faster .each replacement
-			* use it carefully, as it overrides jQuery context of element on each iteration
-			*/
-			each2 : function (c) {
-				var j = $([0]), i = -1, l = this.length;
-				while (
-					++i < l
-					&& (j.context = j[0] = this[i])
-					&& c.call(j[0], i, j) !== false //"this"=DOM, i=index, j=jQuery object
-				);
-				return this;
-			}
- 		});
- 	}
-})(jQuery);
-
 (function ($, undefined) {
     "use strict";
     /*global document, window, jQuery, console */
@@ -40,7 +20,7 @@
         return;
     }
 
-    var KEY, AbstractSelect2, SingleSelect2, MultiSelect2, nextUid, sizer;
+    var KEY, AbstractSelect2, SingleSelect2, MultiSelect2;
 
     KEY = {
         TAB: 9,
@@ -79,9 +59,6 @@
             case KEY.ALT:
                 return true;
             }
-
-            if (k.metaKey) return true;
-
             return false;
         },
         isFunctionKey: function (k) {
@@ -90,8 +67,6 @@
         }
     };
 
-    nextUid=(function() { var counter=1; return function() { return counter++; }; }());
-
     function indexOf(value, array) {
         var i = 0, l = array.length, v;
 
@@ -115,7 +90,7 @@
     }
 
     /**
-     * Compares equality of a and b taking into account that a and b may be strings, in which case localeCompare is used
+     * Compares equality of a and b taking into account that a and b may be strings, in which case localCompare is used
      * @param a
      * @param b
      */
@@ -157,18 +132,17 @@
         });
     }
 
-    $(document).delegate("*", "mousemove", function (e) {
-        $(document).data("select2-lastpos", {x: e.pageX, y: e.pageY});
-    });
-
     /**
      * filters mouse events so an event is fired only if the mouse moved.
      *
      * filters out mouse events that occur when mouse is stationary but
      * the elements under the pointer are scrolled.
      */
+    $(document).delegate("*", "mousemove", function (e) {
+        $(document).data("select2-lastpos", {x: e.pageX, y: e.pageY});
+    });
     function installFilteredMouseMove(element) {
-	    element.bind("mousemove", function (e) {
+        element.bind("mousemove", function (e) {
             var lastpos = $(document).data("select2-lastpos");
             if (lastpos === undefined || lastpos.x !== e.pageX || lastpos.y !== e.pageY) {
                 $(e.target).trigger("mousemove-filtered", e);
@@ -205,41 +179,25 @@
     }
 
     function measureTextWidth(e) {
-        if (!sizer){
-        	var style = e[0].currentStyle || window.getComputedStyle(e[0], null);
-        	sizer = $("<div></div>").css({
-	            position: "absolute",
-	            left: "-1000px",
-	            top: "-1000px",
-	            display: "none",
-	            fontSize: style.fontSize,
-	            fontFamily: style.fontFamily,
-	            fontStyle: style.fontStyle,
-	            fontWeight: style.fontWeight,
-	            letterSpacing: style.letterSpacing,
-	            textTransform: style.textTransform,
-	            whiteSpace: "nowrap"
-	        });
-        	$("body").append(sizer);
-        }
+        var sizer, width;
+        sizer = $("<div></div>").css({
+            position: "absolute",
+            left: "-1000px",
+            top: "-1000px",
+            display: "none",
+            fontSize: e.css("fontSize"),
+            fontFamily: e.css("fontFamily"),
+            fontStyle: e.css("fontStyle"),
+            fontWeight: e.css("fontWeight"),
+            letterSpacing: e.css("letterSpacing"),
+            textTransform: e.css("textTransform"),
+            whiteSpace: "nowrap"
+        });
         sizer.text(e.val());
-        return sizer.width();
-    }
-
-    function markMatch(text, term, markup) {
-        var match=text.toUpperCase().indexOf(term.toUpperCase()),
-            tl=term.length;
-
-        if (match<0) {
-            markup.push(text);
-            return;
-        }
-
-        markup.push(text.substring(0, match));
-        markup.push("<span class='select2-match'>");
-        markup.push(text.substring(match, match + tl));
-        markup.push("</span>");
-        markup.push(text.substring(match + tl, text.length));
+        $("body").append(sizer);
+        width = sizer.width();
+        sizer.remove();
+        return width;
     }
 
     /**
@@ -269,18 +227,17 @@
                 requestSequence += 1; // increment the sequence
                 var requestNumber = requestSequence, // this request's sequence number
                     data = options.data, // ajax data function
-                    transport = options.transport || $.ajax,
-                    type = options.type || 'GET'; // set type of request (GET or POST)
+                    transport = options.transport || $.ajax;
 
                 data = data.call(this, query.term, query.page, query.context);
 
-                if( null !== handler) { handler.abort(); }
-
+                if( null !== handler){
+                    handler.abort();
+                }
                 handler = transport.call(null, {
                     url: options.url,
                     dataType: options.dataType,
                     data: data,
-                    type: type,
                     success: function (data) {
                         if (requestNumber < requestSequence) {
                             return;
@@ -310,16 +267,12 @@
      */
     function local(options) {
         var data = options, // data elements
-            dataText,
             text = function (item) { return ""+item.text; }; // function used to retrieve the text portion of a data item that is matched against the search
 
         if (!$.isArray(data)) {
             text = data.text;
             // if text is not a function we assume it to be a key name
-            if (!$.isFunction(text)) {
-              dataText = data.text; // we need to store this in a separate variable because in the next step data gets reset and data.text is no longer available
-              text = function (item) { return item[dataText]; };
-            }
+            if (!$.isFunction(text)) text = function (item) { return item[data.text]; };
             data = data.results;
         }
 
@@ -365,23 +318,12 @@
     $(document).ready(function () {
         $(document).delegate("*", "mousedown focusin touchend", function (e) {
             var target = $(e.target).closest("div.select2-container").get(0);
-            if (target) {
-                $(document).find("div.select2-container-active").each(function () {
-                    if (this !== target) $(this).data("select2").blur();
-                });
-            } else {
-                target = $(e.target).closest("div.select2-drop").get(0);
-                $(document).find("div.select2-drop-active").each(function () {
-                    if (this !== target) $(this).data("select2").blur();
-                });
-            }
+            $(document).find("div.select2-container-active").each(function () {
+                if (this !== target) $(this).data("select2").blur();
+            });
         });
     });
 
-    function evaluate(val) {
-        return $.isFunction(val) ? val() : val;
-    }
-
     /**
      * Creates a new class
      *
@@ -399,7 +341,6 @@
 
     AbstractSelect2 = clazz(Object, {
 
-        // abstract
         bind: function (func) {
             var self = this;
             return function () {
@@ -407,7 +348,6 @@
             };
         },
 
-        // abstract
         init: function (opts) {
             var results, search, resultsSelector = ".select2-results";
 
@@ -424,15 +364,11 @@
 
             this.enabled=true;
             this.container = this.createContainer();
-			this.body = opts.element.closest("body"); // cache for future access
 
             if (opts.element.attr("class") !== undefined) {
                 this.container.addClass(opts.element.attr("class"));
             }
 
-            this.container.css(evaluate(opts.containerCss));
-            this.container.addClass(evaluate(opts.containerCssClass));
-
             // swap container for the element
             this.opts.element
                 .data("select2", this)
@@ -441,12 +377,8 @@
             this.container.data("select2", this);
 
             this.dropdown = this.container.find(".select2-drop");
-            this.dropdown.css(evaluate(opts.dropdownCss));
-            this.dropdown.addClass(evaluate(opts.dropdownCssClass));
-            this.dropdown.data("select2", this);
-
             this.results = results = this.container.find(resultsSelector);
-            this.search = search = this.container.find("input.select2-input");
+            this.search = search = this.container.find("input[type=text]");
 
             this.resultsPage = 0;
             this.context = null;
@@ -455,10 +387,10 @@
             this.initContainer();
 
             installFilteredMouseMove(this.results);
-            this.dropdown.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
+            this.container.delegate(resultsSelector, "mousemove-filtered", this.bind(this.highlightUnderEvent));
 
             installDebouncedScroll(80, this.results);
-            this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
+            this.container.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));
 
             // if jquery.mousewheel plugin is installed we can prevent out-of-bounds scrolling of results via mousewheel
             if ($.fn.mousewheel) {
@@ -476,11 +408,11 @@
 
             installKeyUpChangeEvent(search);
             search.bind("keyup-change", this.bind(this.updateResults));
-            search.bind("focus", function () { search.addClass("select2-focused"); if (search.val() === " ") search.val(""); });
+            search.bind("focus", function () { search.addClass("select2-focused");});
             search.bind("blur", function () { search.removeClass("select2-focused");});
 
-            this.dropdown.delegate(resultsSelector, "click", this.bind(function (e) {
-                if ($(e.target).closest(".select2-result-selectable:not(.select2-disabled)").length > 0) {
+            this.container.delegate(resultsSelector, "click", this.bind(function (e) {
+                if ($(e.target).closest(".select2-result:not(.select2-disabled)").length > 0) {
                     this.highlightUnderEvent(e);
                     this.selectHighlighted(e);
                 } else {
@@ -501,12 +433,10 @@
             if (opts.element.is(":disabled")) this.disable();
         },
 
-        // abstract
         destroy: function () {
             var select2 = this.opts.element.data("select2");
             if (select2 !== undefined) {
                 select2.container.remove();
-                select2.dropdown.remove();
                 select2.opts.element
                     .removeData("select2")
                     .unbind(".select2")
@@ -514,7 +444,6 @@
             }
         },
 
-        // abstract
         prepareOpts: function (opts) {
             var element, select, idKey;
 
@@ -534,69 +463,10 @@
             }
 
             opts = $.extend({}, {
-                containerCss: {},
-                dropdownCss: {},
-                containerCssClass: "",
-                dropdownCssClass: "",
-                populateResults: function(container, results, query) {
-                    var uidToData={}, populate, markup=[], uid, data, result, children, formatted, id=this.opts.id;
-
-                    populate=function(results, depth) {
-
-                        var i, l, uid, result, selectable, compound;
-                        for (i = 0, l = results.length; i < l; i = i + 1) {
-
-                            result=results[i];
-                            selectable=id(result) !== undefined;
-                            compound=("children" in result) && result.children.length > 0;
-
-                            markup.push("<li class='select2-result-depth-" + depth);
-                            markup.push(" select2-result");
-                            markup.push(selectable ? " select2-result-selectable" : " select2-result-unselectable");
-                            if (compound) { markup.push(" select2-result-with-children"); }
-
-                            markup.push("'");
-
-                            uid=nextUid();
-                            markup.push(" id='select2-result-"+uid+"'");
-                            uidToData[uid]=result;
-
-                            markup.push("><div class='select2-result-label'>");
-                            formatted=opts.formatResult(result, query, markup);
-                            // for backwards compat with <3.0 versions
-                            if (formatted!==undefined) {
-                                markup.push(formatted);
-                            }
-                            markup.push("</div>");
-
-                            if (compound) {
-                                markup.push("<ul class='select2-result-sub'>");
-                                populate(result.children, depth + 1);
-                                markup.push("</ul>");
-                            }
-
-                            markup.push("</li>");
-                        }
-                    };
-
-                    populate(results, 0);
-
-                    container.append(markup.join(""));
-
-                    for (uid in uidToData) {
-                        $("#select2-result-"+uid, container).data("select2-data", uidToData[uid]);
-                    }
-
-                },
-                formatResult: function(result, query, markup) {
-                    markMatch(result.text, query.term, markup);
-                },
-                formatSelection: function (data) {
-                    return data.fullText || data.text;
-                },
+                formatResult: function (data) { return data.text; },
+                formatSelection: function (data) { return data.text; },
                 formatNoMatches: function () { return "No matches found"; },
                 formatInputTooShort: function (input, min) { return "Please enter " + (min - input.length) + " more characters"; },
-                formatLoadMore: function (pageNumber) { return "Loading more results..."; },
                 minimumResultsForSearch: 0,
                 minimumInputLength: 0,
                 id: function (e) { return e.id; },
@@ -612,37 +482,19 @@
 
             if (select) {
                 opts.query = this.bind(function (query) {
-                    var data = { results: [], more: false },
+                    var data = {results: [], more: false},
                         term = query.term,
-                        children, firstChild, process;
-
-                    process=function(element, collection) {
-                        var group;
-                        if (element.is("option")) {
-                            if (query.matcher(term, element.text())) {
-                                collection.push({id:element.attr("value"), text:element.text(), element: element.get()});
-                            }
-                        } else if (element.is("optgroup")) {
-                            group={text:element.attr("label"), children:[], element: element.get()};
-                            element.children().each2(function(i, elm) { process(elm, group.children); });
-                            if (group.children.length>0) {
-                                collection.push(group);
-                            }
-                        }
-                    };
+                        placeholder = this.getPlaceholder();
+                    element.find("option").each(function (i) {
+                        var e = $(this),
+                            text = e.text();
 
-                    children=element.children();
+                        if (i === 0 && placeholder !== undefined && text === "") return true;
 
-                    // ignore the placeholder option if there is one
-                    if (this.getPlaceholder() !== undefined && children.length > 0) {
-                        firstChild = children[0];
-                        if ($(firstChild).text() === "") {
-                            children=children.not(firstChild);
+                        if (query.matcher(term, text)) {
+                            data.results.push({id: e.attr("value"), text: text});
                         }
-                    }
-
-                    children.each2(function(i, elm) { process(elm, data.results); });
-
+                    });
                     query.callback(data);
                 });
                 // this is needed because inside val() we construct choices from options and there id is hardcoded
@@ -656,13 +508,12 @@
                     } else if ("tags" in opts) {
                         opts.query = tags(opts.tags);
                         opts.createSearchChoice = function (term) { return {id: term, text: term}; };
-                        opts.initSelection = function (element, callback) {
+                        opts.initSelection = function (element) {
                             var data = [];
                             $(splitVal(element.val(), ",")).each(function () {
                                 data.push({id: this, text: this});
                             });
-
-                            callback(data);
+                            return data;
                         };
                     }
                 }
@@ -677,7 +528,6 @@
         /**
          * Monitor the original element for changes and update select2 accordingly
          */
-        // abstract
         monitorSource: function () {
             this.opts.element.bind("change.select2", this.bind(function (e) {
                 if (this.opts.element.data("select2-change-triggered") !== true) {
@@ -689,19 +539,14 @@
         /**
          * Triggers the change event on the source element
          */
-        // abstract
-        triggerChange: function (details) {
-
-            details = details || {};
-            details= $.extend({}, details, { type: "change", val: this.val() });
-            // prevents recursive triggering
+        triggerChange: function () {
+            // Prevents recursive triggering
             this.opts.element.data("select2-change-triggered", true);
-            this.opts.element.trigger(details);
+            this.opts.element.trigger("change");
             this.opts.element.data("select2-change-triggered", false);
         },
 
 
-        // abstract
         enable: function() {
             if (this.enabled) return;
 
@@ -709,7 +554,6 @@
             this.container.removeClass("select2-container-disabled");
         },
 
-        // abstract
         disable: function() {
             if (!this.enabled) return;
 
@@ -719,67 +563,21 @@
             this.container.addClass("select2-container-disabled");
         },
 
-        // abstract
         opened: function () {
             return this.container.hasClass("select2-dropdown-open");
         },
 
-        // abstract
-        positionDropdown: function() {
-            var offset = this.container.offset();
-            var height = this.container.outerHeight();
-            var width  = this.container.outerWidth();
-            var css    = {
-                top: offset.top + height,
-                left: offset.left,
-                width: width
-            }
-            this.dropdown.css(css);
-        },
-
-        // abstract
-        shouldOpen: function() {
-            var event;
-
-            if (this.opened()) return false;
-
-            event = jQuery.Event("open");
-            this.opts.element.trigger(event);
-            return !event.isDefaultPrevented();
-        },
-
-        /**
-         * Opens the dropdown
-         *
-         * @return {Boolean} whether or not dropdown was opened. This method will return false if, for example,
-         * the dropdown is already open, or if the 'open' event listener on the element called preventDefault().
-         */
-        // abstract
         open: function () {
-
-            if (!this.shouldOpen()) return false;
-
-            if (this.search.val() === " ") { this.search.val(""); }
+            if (this.opened()) return;
 
             this.container.addClass("select2-dropdown-open").addClass("select2-container-active");
-            if(this.dropdown[0] !== this.body.children().last()[0]) {
-				// ensure the dropdown is the last child of body, so the z-index is always respected correctly
-                this.dropdown.detach().appendTo(this.body);
-            }
-
-            this.dropdown.addClass("select2-drop-active");
-
-            this.positionDropdown();
 
             this.updateResults(true);
             this.dropdown.show();
             this.ensureHighlightVisible();
             this.focusSearch();
-
-            return true;
         },
 
-        // abstract
         close: function () {
             if (!this.opened()) return;
 
@@ -789,31 +587,18 @@
             this.clearSearch();
         },
 
-        // abstract
         clearSearch: function () {
 
         },
 
-        // abstract
         ensureHighlightVisible: function () {
             var results = this.results, children, index, child, hb, rb, y, more;
 
+            children = results.children(".select2-result");
             index = this.highlight();
 
             if (index < 0) return;
 
-            if (index == 0) {
-
-                // if the first element is highlighted scroll all the way to the top,
-                // that way any unselectable headers above it will also be scrolled
-                // into view
-
-                results.scrollTop(0);
-                return;
-            }
-
-            children = results.find(".select2-result-selectable");
-
             child = $(children[index]);
 
             hb = child.offset().top + child.outerHeight();
@@ -838,84 +623,84 @@
             }
         },
 
-        // abstract
         moveHighlight: function (delta) {
-            var choices = this.results.find(".select2-result-selectable"),
+            var choices = this.results.children(".select2-result"),
                 index = this.highlight();
 
             while (index > -1 && index < choices.length) {
                 index += delta;
-                var choice = $(choices[index]);
-                if (choice.hasClass("select2-result-selectable") && !choice.hasClass("select2-disabled")) {
+                if (!$(choices[index]).hasClass("select2-disabled")) {
                     this.highlight(index);
                     break;
                 }
             }
         },
 
-        // abstract
         highlight: function (index) {
-            var choices = this.results.find(".select2-result-selectable");
+            var choices = this.results.children(".select2-result");
 
             if (arguments.length === 0) {
                 return indexOf(choices.filter(".select2-highlighted")[0], choices.get());
             }
 
+            choices.removeClass("select2-highlighted");
+
             if (index >= choices.length) index = choices.length - 1;
             if (index < 0) index = 0;
 
-            choices.removeClass("select2-highlighted");
-
             $(choices[index]).addClass("select2-highlighted");
             this.ensureHighlightVisible();
 
-            //if (this.opened()) this.focusSearch();
+            if (this.opened()) this.focusSearch();
         },
 
-        // abstract
         highlightUnderEvent: function (event) {
-            var el = $(event.target).closest(".select2-result-selectable");
-            if (el.length > 0 && !el.is(".select2-highlighted")) {
-        		var choices = this.results.find('.select2-result-selectable');
-                this.highlight(choices.index(el));
-            } else if (el.length == 0) {
-                // if we are over an unselectable item remove al highlights
-                this.results.find(".select2-highlighted").removeClass("select2-highlighted");
+            var el = $(event.target).closest(".select2-result");
+            if (el.length > 0) {
+                this.highlight(el.index());
             }
         },
 
-        // abstract
         loadMoreIfNeeded: function () {
             var results = this.results,
                 more = results.find("li.select2-more-results"),
                 below, // pixels the element is below the scroll fold, below==0 is when the element is starting to be visible
                 offset = -1, // index of first element without data
-                page = this.resultsPage + 1,
-                self=this,
-                term=this.search.val(),
-                context=this.context;
+                page = this.resultsPage + 1;
 
             if (more.length === 0) return;
+
             below = more.offset().top - results.offset().top - results.height();
 
             if (below <= 0) {
                 more.addClass("select2-active");
                 this.opts.query({
-                        term: term,
+                        term: this.search.val(),
                         page: page,
-                        context: context,
+                        context: this.context,
                         matcher: this.opts.matcher,
                         callback: this.bind(function (data) {
-
-                    self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context});
-
-                    if (data.more===true) {
-                        more.detach().appendTo(results.children(":last")).text(self.opts.formatLoadMore(page+1));
-                        window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
+                    var parts = [], self = this;
+                    $(data.results).each(function () {
+                        parts.push("<li class='select2-result'>");
+                        parts.push(self.opts.formatResult(this));
+                        parts.push("</li>");
+                    });
+                    more.before(parts.join(""));
+                    results.find(".select2-result").each(function (i) {
+                        var e = $(this);
+                        if (e.data("select2-data") !== undefined) {
+                            offset = i;
+                        } else {
+                            e.data("select2-data", data.results[i - offset - 1]);
+                        }
+                    });
+                    if (data.more) {
+                        more.removeClass("select2-active");
                     } else {
                         more.remove();
                     }
-                    self.resultsPage = page;
+                    this.resultsPage = page;
                 })});
             }
         },
@@ -923,7 +708,6 @@
         /**
          * @param initial whether or not this is the call to this method right after the dropdown has been opened
          */
-        // abstract
         updateResults: function (initial) {
             var search = this.search, results = this.results, opts = this.opts, self=this;
 
@@ -934,14 +718,10 @@
 
             search.addClass("select2-active");
 
-            function postRender() {
-                results.scrollTop(0);
-                search.removeClass("select2-active");
-            }
-
             function render(html) {
                 results.html(html);
-                postRender();
+                results.scrollTop(0);
+                search.removeClass("select2-active");
             }
 
             if (search.val().length < opts.minimumInputLength) {
@@ -956,7 +736,8 @@
                     context: null,
                     matcher: opts.matcher,
                     callback: this.bind(function (data) {
-                var def; // default choice
+                var parts = [], // html parts
+                    def; // default choice
 
                 // save context, if any
                 this.context = (data.context===undefined) ? null : data.context;
@@ -979,36 +760,41 @@
                     return;
                 }
 
-                results.empty();
-                self.opts.populateResults.call(this, results, data.results, {term: search.val(), page: this.resultsPage, context:null});
-                postRender();
+                $(data.results).each(function () {
+                    parts.push("<li class='select2-result'>");
+                    parts.push(opts.formatResult(this));
+                    parts.push("</li>");
+                });
 
                 if (data.more === true) {
-                    results.children().filter(":last").append("<li class='select2-more-results'>" + opts.formatLoadMore(this.resultsPage) + "</li>");
-                    window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
+                    parts.push("<li class='select2-more-results'>Loading more results...</li>");
                 }
 
+                render(parts.join(""));
+                results.children(".select2-result").each(function (i) {
+                    var d = data.results[i];
+                    $(this).data("select2-data", d);
+                });
                 this.postprocessResults(data, initial);
             })});
         },
 
-        // abstract
         cancel: function () {
             this.close();
         },
 
-        // abstract
         blur: function () {
-            this.close();
-            this.container.removeClass("select2-container-active");
-            this.dropdown.removeClass("select2-drop-active");
-            // synonymous to .is(':focus'), which is available in jquery >= 1.6
-            if (this.search[0] === document.activeElement) { this.search.blur(); }
-            this.clearSearch();
-            this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+            /* we do this in a timeout so that current event processing can complete before this code is executed.
+             this allows tab index to be preserved even if this code blurs the textfield */
+            window.setTimeout(this.bind(function () {
+                this.close();
+                this.container.removeClass("select2-container-active");
+                this.clearSearch();
+                this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+                this.search.blur();
+            }), 10);
         },
 
-        // abstract
         focusSearch: function () {
             /* we do this in a timeout so that current event processing can complete before this code is executed.
              this makes sure the search field is focussed even if the current event would blur it */
@@ -1017,20 +803,15 @@
             }), 10);
         },
 
-        // abstract
         selectHighlighted: function () {
-            var data = this.results.find(".select2-highlighted").not(".select2-disabled").closest('.select2-result-selectable').data("select2-data");
+            var data = this.results.find(".select2-highlighted:not(.select2-disabled)").data("select2-data");
             if (data) {
                 this.onSelect(data);
             }
         },
 
-        // abstract
         getPlaceholder: function () {
-            return this.opts.element.attr("placeholder") ||
-                this.opts.element.attr("data-placeholder") || // jquery 1.4 compat
-                this.opts.element.data("placeholder") ||
-                this.opts.placeholder;
+            return this.opts.element.attr("placeholder") || this.opts.element.data("placeholder") || this.opts.placeholder;
         },
 
         /**
@@ -1041,7 +822,6 @@
          *
          * @returns The width string (with units) for the container.
          */
-        // abstract
         getContainerWidth: function () {
             var style, attrs, matches, i, l;
             if (this.opts.width !== undefined)
@@ -1057,64 +837,61 @@
                         return matches[1];
                 }
             }
-            return (this.opts.element.width() === 0 ? 'auto' : this.opts.element.width() + 'px');
+            return this.opts.element.width() + 'px';
         }
     });
 
     SingleSelect2 = clazz(AbstractSelect2, {
 
-        // single
         createContainer: function () {
             return $("<div></div>", {
                 "class": "select2-container",
                 "style": "width: " + this.getContainerWidth()
             }).html([
-                "    <a href='javascript:void(0)' class='select2-choice'><input type='text' class='select2-offscreen select2-focusser'/>",
+                "    <a href='javascript:void(0)' class='select2-choice'>",
                 "   <span></span><abbr class='select2-search-choice-close' style='display:none;'></abbr>",
                 "   <div><b></b></div>" ,
                 "</a>",
                 "    <div class='select2-drop' style='display:none;'>" ,
                 "   <div class='select2-search'>" ,
-                "       <input type='text' autocomplete='off' class='select2-input'/>" ,
+                "       <input type='text' autocomplete='off'/>" ,
                 "   </div>" ,
                 "   <ul class='select2-results'>" ,
                 "   </ul>" ,
                 "</div>"].join(""));
         },
 
-        // single
+        open: function () {
+
+            if (this.opened()) return;
+
+            this.parent.open.apply(this, arguments);
+
+        },
+
         close: function () {
             if (!this.opened()) return;
             this.parent.close.apply(this, arguments);
         },
 
-        // single
         focus: function () {
             this.close();
             this.selection.focus();
         },
 
-        // single
         isFocused: function () {
-            return this.selection[0] === document.activeElement;
+            return this.selection.is(":focus");
         },
 
-        // single
         cancel: function () {
             this.parent.cancel.apply(this, arguments);
             this.selection.focus();
         },
 
-        // single
         initContainer: function () {
 
-            var selection,
-                container = this.container,
-                dropdown = this.dropdown,
-                containers = $([this.container.get(0), this.dropdown.get(0)]),
-                clickingInside = false,
-                selector = ".select2-choice",
-                focusser=container.find("input.select2-focusser");
+            var selection, container = this.container, clickingInside = false,
+                selector = ".select2-choice";
 
             this.selection = selection = container.find(selector);
 
@@ -1132,12 +909,12 @@
                     return;
                 case KEY.ESC:
                     this.cancel(e);
-                    killEvent(e);
+                    e.preventDefault();
                     return;
                 }
             }));
 
-            containers.delegate(selector, "click", this.bind(function (e) {
+            container.delegate(selector, "click", this.bind(function (e) {
                 clickingInside = true;
 
                 if (this.opened()) {
@@ -1150,7 +927,7 @@
 
                 clickingInside = false;
             }));
-            containers.delegate(selector, "keydown", this.bind(function (e) {
+            container.delegate(selector, "keydown", this.bind(function (e) {
                 if (!this.enabled || e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
                     return;
                 }
@@ -1164,80 +941,56 @@
                     killEvent(e);
                 }
             }));
-            containers.delegate(selector, "focus", function () { if (this.enabled) { containers.addClass("select2-container-active"); dropdown.addClass("select2-drop-active"); }});
-            containers.delegate(selector, "blur", this.bind(function (e) {
+            container.delegate(selector, "focus", function () { if (this.enabled) container.addClass("select2-container-active"); });
+            container.delegate(selector, "blur", this.bind(function () {
                 if (clickingInside) return;
-                if (e.target===focusser.get(0)) return; // ignore blurs from focusser
-                if (!this.opened()) { this.blur(); }
+                if (!this.opened()) this.blur();
             }));
 
             selection.delegate("abbr", "click", this.bind(function (e) {
                 if (!this.enabled) return;
-                this.clear();
+                this.val("");
                 killEvent(e);
                 this.close();
                 this.triggerChange();
-                selection.focus();
             }));
 
             this.setPlaceholder();
-
-            focusser.bind("focus", function() { selection.focus(); });
-            selection.bind("focus", this.bind(function() {
-                focusser.hide();
-                this.container.addClass("select2-container-active");
-            }));
-            selection.bind("blur", function() { focusser.show(); });
-            this.opts.element.bind("open", function() { focusser.hide(); });
-        },
-
-        clear: function() {
-            this.opts.element.val("");
-            this.selection.find("span").empty();
-            this.selection.removeData("select2-data");
-            this.setPlaceholder();
         },
 
         /**
          * Sets selection based on source element's value
          */
-        // single
         initSelection: function () {
             var selected;
             if (this.opts.element.val() === "") {
                 this.updateSelection({id: "", text: ""});
-                this.close();
-                this.setPlaceholder();
             } else {
-                var self = this;
-                this.opts.initSelection.call(null, this.opts.element, function(selected){
-                    if (selected !== undefined && selected !== null) {
-                        self.updateSelection(selected);
-                        self.close();
-                        self.setPlaceholder();
-                    }
-                });
+                selected = this.opts.initSelection.call(null, this.opts.element);
+                if (selected !== undefined && selected !== null) {
+                    this.updateSelection(selected);
+                }
             }
+
+            this.close();
+            this.setPlaceholder();
         },
 
-        // single
         prepareOpts: function () {
             var opts = this.parent.prepareOpts.apply(this, arguments);
 
             if (opts.element.get(0).tagName.toLowerCase() === "select") {
-                // install the selection initializer
-                opts.initSelection = function (element, callback) {
+                // install sthe selection initializer
+                opts.initSelection = function (element) {
                     var selected = element.find(":selected");
                     // a single select box always has a value, no need to null check 'selected'
-                    if ($.isFunction(callback))
-                        callback({id: selected.attr("value"), text: selected.text()});
+                    return {id: selected.attr("value"), text: selected.text()};
                 };
             }
 
             return opts;
         },
 
-        // single
         setPlaceholder: function () {
             var placeholder = this.getPlaceholder();
 
@@ -1257,14 +1010,13 @@
             }
         },
 
-        // single
         postprocessResults: function (data, initial) {
             var selected = 0, self = this, showSearchInput = true;
 
             // find the selected element in the result list
 
-            this.results.find(".select2-result-selectable").each2(function (i, elm) {
-                if (equal(self.id(elm.data("select2-data")), self.opts.element.val())) {
+            this.results.find(".select2-result").each(function (i) {
+                if (equal(self.id($(this).data("select2-data")), self.opts.element.val())) {
                     selected = i;
                     return false;
                 }
@@ -1277,18 +1029,15 @@
             // hide the search box if this is the first we got the results and there are a few of them
 
             if (initial === true) {
-                // TODO below we use data.results.length, but what we really need is something recursive to calc the length
-                // TODO in case there are optgroups
                 showSearchInput = this.showSearchInput = data.results.length >= this.opts.minimumResultsForSearch;
-                this.dropdown.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden");
+                this.container.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden");
 
                 //add "select2-with-searchbox" to the container if search box is shown
-                $(this.dropdown, this.container)[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");
+                this.container[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");
             }
 
         },
 
-        // single
         onSelect: function (data) {
             var old = this.opts.element.val();
 
@@ -1300,11 +1049,7 @@
             if (!equal(old, this.id(data))) { this.triggerChange(); }
         },
 
-        // single
         updateSelection: function (data) {
-
-            this.selection.data("select2-data", data);
-
             this.selection
                 .find("span")
                 .html(this.opts.formatSelection(data));
@@ -1316,7 +1061,6 @@
             }
         },
 
-        // single
         val: function () {
             var val, data = null;
 
@@ -1330,8 +1074,8 @@
                 // val is an id
                 this.select
                     .val(val)
-                    .find(":selected").each2(function (i, elm) {
-                        data = {id: elm.attr("value"), text: elm.text()};
+                    .find(":selected").each(function () {
+                        data = {id: $(this).attr("value"), text: $(this).text()};
                         return false;
                     });
                 this.updateSelection(data);
@@ -1344,29 +1088,13 @@
 
         },
 
-        // single
         clearSearch: function () {
             this.search.val("");
-        },
-
-        // single
-        data: function(value) {
-            if (arguments.length === 0) {
-                return this.selection.data("select2-data");
-            } else {
-                if (!value || value === "") {
-                    this.clear();
-                } else {
-                    this.opts.element.val(!value ? "" : this.id(value));
-                    this.updateSelection(value);
-                }
-            }
         }
     });
 
     MultiSelect2 = clazz(AbstractSelect2, {
 
-        // multi
         createContainer: function () {
             return $("<div></div>", {
                 "class": "select2-container select2-container-multi",
@@ -1375,16 +1103,15 @@
                 "    <ul class='select2-choices'>",
                 //"<li class='select2-search-choice'><span>California</span><a href="javascript:void(0)" class="select2-search-choice-close"></a></li>" ,
                 "  <li class='select2-search-field'>" ,
-                "    <input type='text' autocomplete='off' style='width: 25px;' class='select2-input'>" ,
+                "    <input type='text' autocomplete='off' style='width: 25px;'>" ,
                 "  </li>" ,
                 "</ul>" ,
-                "<div class='select2-drop select2-drop-multi' style='display:none;'>" ,
+                "<div class='select2-drop' style='display:none;'>" ,
                 "   <ul class='select2-results'>" ,
                 "   </ul>" ,
                 "</div>"].join(""));
         },
 
-        // multi
         prepareOpts: function () {
             var opts = this.parent.prepareOpts.apply(this, arguments);
 
@@ -1396,22 +1123,18 @@
 
             if (opts.element.get(0).tagName.toLowerCase() === "select") {
                 // install sthe selection initializer
-                opts.initSelection = function (element,callback) {
-
+                opts.initSelection = function (element) {
                     var data = [];
-                    element.find(":selected").each2(function (i, elm) {
-                        data.push({id: elm.attr("value"), text: elm.text()});
+                    element.find(":selected").each(function () {
+                        data.push({id: $(this).attr("value"), text: $(this).text()});
                     });
-
-                    if ($.isFunction(callback))
-                        callback(data);
+                    return data;
                 };
             }
 
             return opts;
         },
 
-        // multi
         initContainer: function () {
 
             var selector = ".select2-choices", selection;
@@ -1456,7 +1179,7 @@
                         return;
                     case KEY.ESC:
                         this.cancel(e);
-                        killEvent(e);
+                        e.preventDefault();
                         return;
                     }
                 }
@@ -1485,7 +1208,6 @@
             this.container.delegate(selector, "focus", this.bind(function () {
                 if (!this.enabled) return;
                 this.container.addClass("select2-container-active");
-                this.dropdown.addClass("select2-drop-active");
                 this.clearPlaceholder();
             }));
 
@@ -1493,7 +1215,6 @@
             this.clearSearch();
         },
 
-        // multi
         enable: function() {
             if (this.enabled) return;
 
@@ -1502,7 +1223,6 @@
             this.search.show();
         },
 
-        // multi
         disable: function() {
             if (!this.enabled) return;
 
@@ -1511,77 +1231,66 @@
             this.search.hide();
         },
 
-        // multi
         initSelection: function () {
             var data;
             if (this.opts.element.val() === "") {
                 this.updateSelection([]);
-                this.close();
-                // set the placeholder if necessary
-                this.clearSearch();
             }
             if (this.select || this.opts.element.val() !== "") {
-                var self = this;
-                this.opts.initSelection.call(null, this.opts.element, function(data){
-                    if (data !== undefined && data !== null) {
-                        self.updateSelection(data);
-                        self.close();
-                        // set the placeholder if necessary
-                        self.clearSearch();
-                    }
-                });
+                data = this.opts.initSelection.call(null, this.opts.element);
+                if (data !== undefined && data !== null) {
+                    this.updateSelection(data);
+                }
             }
+
+            this.close();
+
+            // set the placeholder if necessary
+            this.clearSearch();
         },
 
-        // multi
         clearSearch: function () {
             var placeholder = this.getPlaceholder();
 
-            if (placeholder !== undefined  && this.getVal().length === 0 && this.search.hasClass("select2-focused") === false) {
+            if (placeholder !== undefined
+                && this.getVal().length === 0
+                && this.search.hasClass("select2-focused") === false) {
+
                 this.search.val(placeholder).addClass("select2-default");
                 // stretch the search box to full width of the container so as much of the placeholder is visible as possible
                 this.search.width(this.getContainerWidth());
             } else {
-                // we set this to " " instead of "" and later clear it on focus() because there is a firefox bug
-                // that does not properly render the caret when the field starts out blank
-                this.search.val(" ").width(10);
+                this.search.val("").width(10);
             }
         },
 
-        // multi
         clearPlaceholder: function () {
             if (this.search.hasClass("select2-default")) {
                 this.search.val("").removeClass("select2-default");
             }
         },
 
-        // multi
         open: function () {
-            if (this.parent.open.apply(this, arguments) === false) return false;
-			this.clearPlaceholder();
-			this.resizeSearch();
+            if (this.opened()) return;
+            this.parent.open.apply(this, arguments);
+            this.resizeSearch();
             this.focusSearch();
-            return true;
         },
 
-        // multi
         close: function () {
             if (!this.opened()) return;
             this.parent.close.apply(this, arguments);
         },
 
-        // multi
         focus: function () {
             this.close();
             this.search.focus();
         },
 
-        // multi
         isFocused: function () {
             return this.search.hasClass("select2-focused");
         },
 
-        // multi
         updateSelection: function (data) {
             var ids = [], filtered = [], self = this;
 
@@ -1601,7 +1310,6 @@
             self.postprocessResults();
         },
 
-        // multi
         onSelect: function (data) {
             this.addSelectedChoice(data);
             if (this.select) { this.postprocessResults(); }
@@ -1616,18 +1324,16 @@
 
             // since its not possible to select an element that has already been
             // added we do not need to check if this is a new element before firing change
-            this.triggerChange({ added: data });
+            this.triggerChange();
 
             this.focusSearch();
         },
 
-        // multi
         cancel: function () {
             this.close();
             this.focusSearch();
         },
 
-        // multi
         addSelectedChoice: function (data) {
             var choice,
                 id = this.id(data),
@@ -1653,7 +1359,6 @@
             })).bind("focus", this.bind(function () {
                 if (!this.enabled) return;
                 this.container.addClass("select2-container-active");
-                this.dropdown.addClass("select2-drop-active");
             }));
 
             choice.data("select2-data", data);
@@ -1663,10 +1368,8 @@
             this.setVal(val);
         },
 
-        // multi
         unselect: function (selected) {
             var val = this.getVal(),
-                data,
                 index;
 
             selected = selected.closest(".select2-search-choice");
@@ -1675,9 +1378,7 @@
                 throw "Invalid argument: " + selected + ". Must be .select2-search-choice";
             }
 
-            data = selected.data("select2-data");
-
-            index = indexOf(this.id(data), val);
+            index = indexOf(this.id(selected.data("select2-data")), val);
 
             if (index >= 0) {
                 val.splice(index, 1);
@@ -1685,17 +1386,16 @@
                 if (this.select) this.postprocessResults();
             }
             selected.remove();
-            this.triggerChange({ removed: data });
+            this.triggerChange();
         },
 
-        // multi
         postprocessResults: function () {
             var val = this.getVal(),
-                choices = this.results.find(".select2-result-selectable"),
+                choices = this.results.find(".select2-result"),
                 self = this;
 
-            choices.each2(function (i, choice) {
-                var id = self.id(choice.data("select2-data"));
+            choices.each(function () {
+                var choice = $(this), id = self.id(choice.data("select2-data"));
                 if (indexOf(id, val) >= 0) {
                     choice.addClass("select2-disabled");
                 } else {
@@ -1703,8 +1403,8 @@
                 }
             });
 
-            choices.each2(function (i, choice) {
-                if (!choice.hasClass("select2-disabled")) {
+            choices.each(function (i) {
+                if (!$(this).hasClass("select2-disabled")) {
                     self.highlight(i);
                     return false;
                 }
@@ -1712,11 +1412,9 @@
 
         },
 
-        // multi
         resizeSearch: function () {
 
-            var minimumWidth, left, maxWidth, containerLeft, searchWidth,
-            	sideBorderPadding = getSideBorderPadding(this.search);
+            var minimumWidth, left, maxWidth, containerLeft, searchWidth;
 
             minimumWidth = measureTextWidth(this.search) + 10;
 
@@ -1725,19 +1423,18 @@
             maxWidth = this.selection.width();
             containerLeft = this.selection.offset().left;
 
-            searchWidth = maxWidth - (left - containerLeft) - sideBorderPadding;
+            searchWidth = maxWidth - (left - containerLeft) - getSideBorderPadding(this.search);
 
             if (searchWidth < minimumWidth) {
-                searchWidth = maxWidth - sideBorderPadding;
+                searchWidth = maxWidth - getSideBorderPadding(this.search);
             }
 
             if (searchWidth < 40) {
-                searchWidth = maxWidth - sideBorderPadding;
+                searchWidth = maxWidth - getSideBorderPadding(this.search);
             }
             this.search.width(searchWidth);
         },
 
-        // multi
         getVal: function () {
             var val;
             if (this.select) {
@@ -1749,7 +1446,6 @@
             }
         },
 
-        // multi
         setVal: function (val) {
             var unique;
             if (this.select) {
@@ -1764,7 +1460,6 @@
             }
         },
 
-        // multi
         val: function () {
             var val, data = [], self=this;
 
@@ -1783,6 +1478,7 @@
                 this.updateSelection(data);
             } else {
                 val = (val === null) ? [] : val;
+                this.setVal(val);
                 // val is a list of objects
                 $(val).each(function () { data.push(self.id(this)); });
                 this.setVal(data);
@@ -1791,8 +1487,6 @@
 
             this.clearSearch();
         },
-
-        // multi
         onSortStart: function() {
             if (this.select) {
                 throw new Error("Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.");
@@ -1803,8 +1497,6 @@
             // hide the container
             this.searchContainer.hide();
         },
-
-        // multi
         onSortEnd:function() {
 
             var val=[], self=this;
@@ -1813,7 +1505,7 @@
             this.searchContainer.show();
             // make sure the search container is the last item in the list
             this.searchContainer.appendTo(this.searchContainer.parent());
-            // since we collapsed the width in dragStarted, we resize it here
+            // since we collapsed the width in dragStarteed, we resize it here
             this.resizeSearch();
 
             // update selection
@@ -1823,22 +1515,6 @@
             });
             this.setVal(val);
             this.triggerChange();
-        },
-
-        // multi
-        data: function(values) {
-            var self=this, ids;
-            if (arguments.length === 0) {
-                 return this.selection
-                     .find(".select2-search-choice")
-                     .map(function() { return $(this).data("select2-data"); })
-                     .get();
-            } else {
-                ids = $.map(values, function(e) { return self.opts.id(e)});
-                this.setVal(ids);
-                this.updateSelection(values);
-                this.clearSearch();
-            }
         }
     });
 
@@ -1847,7 +1523,7 @@
         var args = Array.prototype.slice.call(arguments, 0),
             opts,
             select2,
-            value, multiple, allowedMethods = ["val", "destroy", "open", "close", "focus", "isFocused", "container", "onSortStart", "onSortEnd", "enable", "disable", "positionDropdown", "data"];
+            value, multiple, allowedMethods = ["val", "destroy", "open", "close", "focus", "isFocused", "container", "onSortStart", "onSortEnd", "enable", "disable"];
 
         this.each(function () {
             if (args.length === 0 || typeof(args[0]) === "object") {
@@ -1892,8 +1568,7 @@
             local: local,
             tags: tags
         }, util: {
-            debounce: debounce,
-            markMatch: markMatch
+            debounce: debounce
         }, "class": {
             "abstract": AbstractSelect2,
             "single": SingleSelect2,