select2-rails 0.0.5 → 0.0.6

data/lib/select2-rails/version.rb

@@ -1,5 +1,5 @@
 module Select2
   module Rails
-    VERSION = "0.0.5"
+    VERSION = "0.0.6"
   end
 end

data/vendor/assets/javascripts/select2.js

@@ -12,6 +12,26 @@
  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 */
@@ -20,7 +40,7 @@
         return;
     }
 
-    var KEY, AbstractSelect2, SingleSelect2, MultiSelect2, nextUid;
+    var KEY, AbstractSelect2, SingleSelect2, MultiSelect2, nextUid, sizer;
 
     KEY = {
         TAB: 9,
@@ -134,17 +154,18 @@
         });
     }
 
+    $(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);
@@ -180,26 +201,42 @@
         event.stopPropagation();
     }
 
-    function measureTextWidth(e) {
-        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());
-        $("body").append(sizer);
-        width = sizer.width();
-        sizer.remove();
-        return width;
+    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);
+        }
+        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));
     }
 
     /**
@@ -229,17 +266,18 @@
                 requestSequence += 1; // increment the sequence
                 var requestNumber = requestSequence, // this request's sequence number
                     data = options.data, // ajax data function
-                    transport = options.transport || $.ajax;
-
+                    transport = options.transport || $.ajax,
+                    type = options.type || 'GET'; // set type of request (GET or POST)
+                
                 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;
@@ -337,6 +375,10 @@
         });
     });
 
+    function evaluate(val) {
+        return $.isFunction(val) ? val() : val;
+    }
+
     /**
      * Creates a new class
      *
@@ -354,6 +396,7 @@
 
     AbstractSelect2 = clazz(Object, {
 
+        // abstract
         bind: function (func) {
             var self = this;
             return function () {
@@ -361,6 +404,7 @@
             };
         },
 
+        // abstract
         init: function (opts) {
             var results, search, resultsSelector = ".select2-results";
 
@@ -377,11 +421,15 @@
 
             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)
@@ -390,10 +438,12 @@
             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[type=text]");
+            this.search = search = this.container.find("input.select2-input");
 
             this.resultsPage = 0;
             this.context = null;
@@ -448,6 +498,7 @@
             if (opts.element.is(":disabled")) this.disable();
         },
 
+        // abstract
         destroy: function () {
             var select2 = this.opts.element.data("select2");
             if (select2 !== undefined) {
@@ -456,13 +507,14 @@
                 select2.opts.element
                     .removeData("select2")
                     .unbind(".select2")
-                    .show();
+                    .show();                
             }
         },
 
+        // abstract
         prepareOpts: function (opts) {
             var element, select, idKey;
-
+            
             element = opts.element;
 
             if (element.get(0).tagName.toLowerCase() === "select") {
@@ -479,8 +531,12 @@
             }
 
             opts = $.extend({}, {
-                populateResults: function(container, results) {
-                    var uidToData={}, populate, markup=[], uid, data, result, children;
+                containerCss: {},
+                dropdownCss: {},
+                containerCssClass: "",
+                dropdownCssClass: "",
+                populateResults: function(container, results, query) {
+                    var uidToData={}, populate, markup=[], uid, data, result, children, formatted;
 
                     populate=function(results, depth) {
 
@@ -503,7 +559,13 @@
                                 uidToData[uid]=result;
                             }
 
-                            markup.push("><div class='select2-result-label'>"+opts.formatResult(result)+"</div>");
+                            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'>");
@@ -525,22 +587,19 @@
                     }
 
                     for (uid in uidToData) {
-                        $("#select2-result-"+uid).data("select2-data", uidToData[uid]);
+                        $("#select2-result-"+uid, container).data("select2-data", uidToData[uid]);
                     }
 
                 },
-                formatResult: function(result) {
-                     return result.text;
+                formatResult: function(result, query, markup) {
+                    markMatch(result.text, query.term, markup);
                 },
                 formatSelection: function (data) {
-                    if (data.fullText) {
-                        return data.fullText;
-                    } else {
-                        return data.text;
-                    }
+                    return data.fullText || 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; },
@@ -558,7 +617,7 @@
                 opts.query = this.bind(function (query) {
                     var data = { results: [], more: false },
                         term = query.term,
-                        process;
+                        children, firstChild, process;
 
                     process=function(element, collection) {
                         var group;
@@ -568,14 +627,24 @@
                             }
                         } else if (element.is("optgroup")) {
                             group={text:element.attr("label"), children:[]};
-                            element.children().each(function() { process($(this), group.children); });
+                            element.children().each2(function(i, elm) { process(elm, group.children); });
                             if (group.children.length>0) {
                                 collection.push(group);
                             }
                         }
                     };
 
-                    element.children().each(function() { process($(this), data.results); });
+                    children=element.children();
+
+                    // 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);
+                        }
+                    }
+
+                    children.each2(function(i, elm) { process(elm, data.results); });
 
                     query.callback(data);
                 });
@@ -610,6 +679,7 @@
         /**
          * 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) {
@@ -621,14 +691,19 @@
         /**
          * Triggers the change event on the source element
          */
-        triggerChange: function () {
-            // Prevents recursive triggering
+        // abstract
+        triggerChange: function (details) {
+
+            details = details || {};
+            details= $.extend({}, details, { type: "change", val: this.val() });
+            // prevents recursive triggering
             this.opts.element.data("select2-change-triggered", true);
-            this.opts.element.trigger("change");
+            this.opts.element.trigger(details);
             this.opts.element.data("select2-change-triggered", false);
         },
 
 
+        // abstract
         enable: function() {
             if (this.enabled) return;
 
@@ -636,6 +711,7 @@
             this.container.removeClass("select2-container-disabled");
         },
 
+        // abstract
         disable: function() {
             if (!this.enabled) return;
 
@@ -645,10 +721,12 @@
             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();
@@ -658,17 +736,20 @@
                 left: offset.left,
                 width: width
             }
-            if (this.opts.dropdownZIndex !== undefined) {
-                css["z-index"] = this.opts.dropdownZIndex;
-            }
             this.dropdown.css(css);
         },
 
+        // abstract
         open: function () {
             if (this.opened()) return;
 
             this.container.addClass("select2-dropdown-open").addClass("select2-container-active");
-            this.dropdown.detach().appendTo('body').addClass("select2-drop-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();
 
@@ -678,6 +759,7 @@
             this.focusSearch();
         },
 
+        // abstract
         close: function () {
             if (!this.opened()) return;
 
@@ -687,17 +769,20 @@
             this.clearSearch();
         },
 
+        // abstract
         clearSearch: function () {
 
         },
 
+        // abstract
         ensureHighlightVisible: function () {
             var results = this.results, children, index, child, hb, rb, y, more;
-
-            children = results.find(".select2-result");
+            
             index = this.highlight();
 
             if (index < 0) return;
+            
+            children = results.find(".select2-result");
 
             child = $(children[index]);
 
@@ -723,6 +808,7 @@
             }
         },
 
+        // abstract
         moveHighlight: function (delta) {
             var choices = this.results.find(".select2-result"),
                 index = this.highlight();
@@ -736,6 +822,7 @@
             }
         },
 
+        // abstract
         highlight: function (index) {
             var choices = this.results.find(".select2-result .select2-result-label");
 
@@ -755,24 +842,28 @@
             $(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");
-            var choices = this.results.find('.select2-result');
-            if (el.length > 0) {
+            var el = $(event.target).closest(".select2-result");            
+            if (el.length > 0 && !el.is(".select2-highlighted")) {
+        		var choices = this.results.find('.select2-result');
                 this.highlight(choices.index(el));
             }
         },
 
+        // 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;
+                self=this,
+                term=this.search.val(),
+                context=this.context;
 
             if (more.length === 0) return;
             below = more.offset().top - results.offset().top - results.height();
@@ -780,14 +871,13 @@
             if (below <= 0) {
                 more.addClass("select2-active");
                 this.opts.query({
-                        term: this.search.val(),
+                        term: term,
                         page: page,
-                        context: this.context,
+                        context: context,
                         matcher: this.opts.matcher,
                         callback: this.bind(function (data) {
-                            console.log("load more callback", data);
 
-                    self.opts.populateResults(results, data.results);
+                    self.opts.populateResults(results, data.results, {term: term, page: page, context:context});
 
                     if (data.more===true) {
                         more.detach();
@@ -804,6 +894,7 @@
         /**
          * @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;
 
@@ -860,34 +951,33 @@
                 }
 
                 results.empty();
-                self.opts.populateResults(results, data.results);
+                self.opts.populateResults(results, data.results, {term: search.val(), page: this.resultsPage, context:null});
                 postRender();
 
                 if (data.more === true) {
-                    results.children().filter(":last").append("<li class='select2-more-results'>Loading more results...</li>");
+                    results.children().filter(":last").append("<li class='select2-more-results'>" + opts.formatLoadMore(this.resultsPage) + "</li>");
                 }
 
                 this.postprocessResults(data, initial);
             })});
         },
 
+        // abstract
         cancel: function () {
             this.close();
         },
 
+        // abstract
         blur: function () {
-            /* 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.dropdown.removeClass("select2-drop-active");
-                this.clearSearch();
-                this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
-                this.search.blur();
-            }), 10);
+            this.close();
+            this.container.removeClass("select2-container-active");
+            this.dropdown.removeClass("select2-drop-active");
+            if (this.search.is(":focus")) { this.search.blur(); }
+            this.clearSearch();
+            this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
         },
 
+        // 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 */
@@ -896,6 +986,7 @@
             }), 10);
         },
 
+        // abstract
         selectHighlighted: function () {
             var data = this.results.find(".select2-highlighted").not(".select2-disabled").closest('.select2-result').not('.select2-result-unselectable').data("select2-data");
             if (data) {
@@ -903,6 +994,7 @@
             }
         },
 
+        // abstract
         getPlaceholder: function () {
             return this.opts.element.attr("placeholder") || this.opts.element.data("placeholder") || this.opts.placeholder;
         },
@@ -915,6 +1007,7 @@
          *
          * @returns The width string (with units) for the container.
          */
+        // abstract
         getContainerWidth: function () {
             var style, attrs, matches, i, l;
             if (this.opts.width !== undefined)
@@ -936,24 +1029,26 @@
 
     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'>",
+                "    <a href='javascript:void(0)' class='select2-choice'><input type='text' class='select2-offscreen select2-focusser'/>",
                 "   <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'/>" ,
+                "       <input type='text' autocomplete='off' class='select2-input'/>" ,
                 "   </div>" ,
                 "   <ul class='select2-results'>" ,
                 "   </ul>" ,
                 "</div>"].join(""));
         },
 
+        // single
         open: function () {
 
             if (this.opened()) return;
@@ -962,25 +1057,30 @@
 
         },
 
+        // single
         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.is(":focus");
         },
 
+        // single
         cancel: function () {
             this.parent.cancel.apply(this, arguments);
             this.selection.focus();
         },
 
+        // single
         initContainer: function () {
 
             var selection,
@@ -988,7 +1088,8 @@
                 dropdown = this.dropdown,
                 containers = $([this.container.get(0), this.dropdown.get(0)]),
                 clickingInside = false,
-                selector = ".select2-choice";
+                selector = ".select2-choice",
+                focusser=container.find("input.select2-focusser");
 
             this.selection = selection = container.find(selector);
 
@@ -1006,7 +1107,7 @@
                     return;
                 case KEY.ESC:
                     this.cancel(e);
-                    e.preventDefault();
+                    killEvent(e);
                     return;
                 }
             }));
@@ -1039,9 +1140,10 @@
                 }
             }));
             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 () {
+            containers.delegate(selector, "blur", this.bind(function (e) {
                 if (clickingInside) return;
-                if (!this.opened()) this.blur();
+                if (e.target===focusser.get(0)) return; // ignore blurs from focusser
+                if (!this.opened()) { this.blur(); }
             }));
 
             selection.delegate("abbr", "click", this.bind(function (e) {
@@ -1050,14 +1152,24 @@
                 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(); });
         },
 
         /**
          * Sets selection based on source element's value
          */
+        // single
         initSelection: function () {
             var selected;
             if (this.opts.element.val() === "") {
@@ -1073,6 +1185,7 @@
             this.setPlaceholder();
         },
 
+        // single
         prepareOpts: function () {
             var opts = this.parent.prepareOpts.apply(this, arguments);
 
@@ -1088,6 +1201,7 @@
             return opts;
         },
 
+        // single
         setPlaceholder: function () {
             var placeholder = this.getPlaceholder();
 
@@ -1107,13 +1221,14 @@
             }
         },
 
+        // 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").each(function (i) {
-                if (equal(self.id($(this).data("select2-data")), self.opts.element.val())) {
+            this.results.find(".select2-result").each2(function (i, elm) {
+                if (equal(self.id(elm.data("select2-data")), self.opts.element.val())) {
                     selected = i;
                     return false;
                 }
@@ -1126,15 +1241,18 @@
             // 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.container.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden");
+                this.dropdown.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden");
 
                 //add "select2-with-searchbox" to the container if search box is shown
-                this.container[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");
+                $(this.dropdown, this.container)[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");
             }
 
         },
 
+        // single
         onSelect: function (data) {
             var old = this.opts.element.val();
 
@@ -1146,6 +1264,7 @@
             if (!equal(old, this.id(data))) { this.triggerChange(); }
         },
 
+        // single
         updateSelection: function (data) {
             this.selection
                 .find("span")
@@ -1158,6 +1277,7 @@
             }
         },
 
+        // single
         val: function () {
             var val, data = null;
 
@@ -1171,8 +1291,8 @@
                 // val is an id
                 this.select
                     .val(val)
-                    .find(":selected").each(function () {
-                        data = {id: $(this).attr("value"), text: $(this).text()};
+                    .find(":selected").each2(function (i, elm) {
+                        data = {id: elm.attr("value"), text: elm.text()};
                         return false;
                     });
                 this.updateSelection(data);
@@ -1185,6 +1305,7 @@
 
         },
 
+        // single
         clearSearch: function () {
             this.search.val("");
         }
@@ -1192,6 +1313,7 @@
 
     MultiSelect2 = clazz(AbstractSelect2, {
 
+        // multi
         createContainer: function () {
             return $("<div></div>", {
                 "class": "select2-container select2-container-multi",
@@ -1200,7 +1322,7 @@
                 "    <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;'>" ,
+                "    <input type='text' autocomplete='off' style='width: 25px;' class='select2-input'>" ,
                 "  </li>" ,
                 "</ul>" ,
                 "<div class='select2-drop select2-drop-multi' style='display:none;'>" ,
@@ -1209,6 +1331,7 @@
                 "</div>"].join(""));
         },
 
+        // multi
         prepareOpts: function () {
             var opts = this.parent.prepareOpts.apply(this, arguments);
 
@@ -1219,11 +1342,11 @@
             // TODO validate placeholder is a string if specified
 
             if (opts.element.get(0).tagName.toLowerCase() === "select") {
-                // install sthe selection initializer
+                // install the selection initializer
                 opts.initSelection = function (element) {
                     var data = [];
-                    element.find(":selected").each(function () {
-                        data.push({id: $(this).attr("value"), text: $(this).text()});
+                    element.find(":selected").each2(function (i, elm) {
+                        data.push({id: elm.attr("value"), text: elm.text()});
                     });
                     return data;
                 };
@@ -1232,6 +1355,7 @@
             return opts;
         },
 
+        // multi
         initContainer: function () {
 
             var selector = ".select2-choices", selection;
@@ -1276,7 +1400,7 @@
                         return;
                     case KEY.ESC:
                         this.cancel(e);
-                        e.preventDefault();
+                        killEvent(e);
                         return;
                     }
                 }
@@ -1313,6 +1437,7 @@
             this.clearSearch();
         },
 
+        // multi
         enable: function() {
             if (this.enabled) return;
 
@@ -1321,6 +1446,7 @@
             this.search.show();
         },
 
+        // multi
         disable: function() {
             if (!this.enabled) return;
 
@@ -1329,6 +1455,7 @@
             this.search.hide();
         },
 
+        // multi
         initSelection: function () {
             var data;
             if (this.opts.element.val() === "") {
@@ -1347,11 +1474,11 @@
             this.clearSearch();
         },
 
+        // multi
         clearSearch: function () {
             var placeholder = this.getPlaceholder();
 
             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());
@@ -1360,33 +1487,40 @@
             }
         },
 
+        // multi
         clearPlaceholder: function () {
             if (this.search.hasClass("select2-default")) {
                 this.search.val("").removeClass("select2-default");
             }
         },
 
+        // multi
         open: function () {
             if (this.opened()) return;
             this.parent.open.apply(this, arguments);
-            this.resizeSearch();
+			this.clearPlaceholder();
+			this.resizeSearch();
             this.focusSearch();
         },
 
+        // 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;
 
@@ -1406,6 +1540,7 @@
             self.postprocessResults();
         },
 
+        // multi
         onSelect: function (data) {
             this.addSelectedChoice(data);
             if (this.select) { this.postprocessResults(); }
@@ -1420,16 +1555,18 @@
 
             // 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();
+            this.triggerChange({ added: data });
 
             this.focusSearch();
         },
 
+        // multi
         cancel: function () {
             this.close();
             this.focusSearch();
         },
 
+        // multi
         addSelectedChoice: function (data) {
             var choice,
                 id = this.id(data),
@@ -1465,8 +1602,10 @@
             this.setVal(val);
         },
 
+        // multi
         unselect: function (selected) {
             var val = this.getVal(),
+                data,
                 index;
 
             selected = selected.closest(".select2-search-choice");
@@ -1475,7 +1614,9 @@
                 throw "Invalid argument: " + selected + ". Must be .select2-search-choice";
             }
 
-            index = indexOf(this.id(selected.data("select2-data")), val);
+            data = selected.data("select2-data");
+
+            index = indexOf(this.id(data), val);
 
             if (index >= 0) {
                 val.splice(index, 1);
@@ -1483,16 +1624,17 @@
                 if (this.select) this.postprocessResults();
             }
             selected.remove();
-            this.triggerChange();
+            this.triggerChange({ removed: data });
         },
 
+        // multi
         postprocessResults: function () {
             var val = this.getVal(),
                 choices = this.results.find(".select2-result"),
                 self = this;
 
-            choices.each(function () {
-                var choice = $(this), id = self.id(choice.data("select2-data"));
+            choices.each2(function (i, choice) {
+                var id = self.id(choice.data("select2-data"));
                 if (indexOf(id, val) >= 0) {
                     choice.addClass("select2-disabled");
                 } else {
@@ -1500,8 +1642,8 @@
                 }
             });
 
-            choices.each(function (i) {
-                if (!$(this).hasClass("select2-disabled")) {
+            choices.each2(function (i, choice) {
+                if (!choice.hasClass("select2-disabled")) {
                     self.highlight(i);
                     return false;
                 }
@@ -1509,9 +1651,11 @@
 
         },
 
+        // multi
         resizeSearch: function () {
 
-            var minimumWidth, left, maxWidth, containerLeft, searchWidth;
+            var minimumWidth, left, maxWidth, containerLeft, searchWidth,
+            	sideBorderPadding = getSideBorderPadding(this.search);
 
             minimumWidth = measureTextWidth(this.search) + 10;
 
@@ -1520,18 +1664,19 @@
             maxWidth = this.selection.width();
             containerLeft = this.selection.offset().left;
 
-            searchWidth = maxWidth - (left - containerLeft) - getSideBorderPadding(this.search);
+            searchWidth = maxWidth - (left - containerLeft) - sideBorderPadding;
 
             if (searchWidth < minimumWidth) {
-                searchWidth = maxWidth - getSideBorderPadding(this.search);
+                searchWidth = maxWidth - sideBorderPadding;
             }
 
             if (searchWidth < 40) {
-                searchWidth = maxWidth - getSideBorderPadding(this.search);
+                searchWidth = maxWidth - sideBorderPadding;
             }
             this.search.width(searchWidth);
         },
 
+        // multi
         getVal: function () {
             var val;
             if (this.select) {
@@ -1543,6 +1688,7 @@
             }
         },
 
+        // multi
         setVal: function (val) {
             var unique;
             if (this.select) {
@@ -1557,6 +1703,7 @@
             }
         },
 
+        // multi
         val: function () {
             var val, data = [], self=this;
 
@@ -1584,6 +1731,8 @@
 
             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.");
@@ -1594,6 +1743,8 @@
             // hide the container
             this.searchContainer.hide();
         },
+
+        // multi
         onSortEnd:function() {
 
             var val=[], self=this;
@@ -1665,7 +1816,8 @@
             local: local,
             tags: tags
         }, util: {
-            debounce: debounce
+            debounce: debounce,
+            markMatch: markMatch
         }, "class": {
             "abstract": AbstractSelect2,
             "single": SingleSelect2,

data/vendor/assets/stylesheets/select2.css.sass

@@ -287,8 +287,7 @@
     &.select2-result-with-children .select2-result-label
       font-weight: bold
   .select2-result-label
-    line-height: 80%
-    padding: 7px 7px 8px
+    padding: 3px 7px 4px
     margin: 0
     cursor: pointer
   .select2-highlighted
@@ -386,6 +385,8 @@
         -moz-box-shadow: none
         -o-box-shadow: none
         box-shadow: none
+        &.select2-active
+          background: white image-url('spinner.gif') no-repeat 100% !important
 
 .select2-default
   color: #999 !important
@@ -454,3 +455,10 @@
 /* disabled styles
 
 /* end multiselect
+
+.select2-match
+  text-decoration: underline
+
+.select2-offscreen
+  position: absolute
+  left: -1000px

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: select2-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-15 00:00:00.000000000 Z
+date: 2012-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &87475570 !ruby/object:Gem::Requirement
+  requirement: &83485240 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -21,10 +21,10 @@ dependencies:
         version: '0.14'
   type: :runtime
   prerelease: false
-  version_requirements: *87475570
+  version_requirements: *83485240
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &87475320 !ruby/object:Gem::Requirement
+  requirement: &83484990 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -32,10 +32,10 @@ dependencies:
         version: '1.0'
   type: :development
   prerelease: false
-  version_requirements: *87475320
+  version_requirements: *83484990
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &87475090 !ruby/object:Gem::Requirement
+  requirement: &83484760 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -43,10 +43,10 @@ dependencies:
         version: '3.0'
   type: :development
   prerelease: false
-  version_requirements: *87475090
+  version_requirements: *83484760
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &87474860 !ruby/object:Gem::Requirement
+  requirement: &83484530 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -54,7 +54,7 @@ dependencies:
         version: '3.1'
   type: :development
   prerelease: false
-  version_requirements: *87474860
+  version_requirements: *83484530
 description: Select2 is a jQuery based replacement for select boxes. It supports searching,
   remote data sets, and infinite scrolling of results. This gem integrates Select2
   with Rails asset pipeline for easy of use.