Added Ajax Error Handling

Added an error message when an ajax error occurs. This can be
overridden through the select2 option “formatAjaxError”.

Author: Ermish

select2.css

@@ -422,9 +422,9 @@ html[dir="rtl"] .select2-results {
     color: #000;
 }
 
-
 .select2-results .select2-no-results,
 .select2-results .select2-searching,
+.select2-results .select2-ajax-error,
 .select2-results .select2-selection-limit {
     background: #f4f4f4;
     display: list-item;
@@ -454,6 +454,10 @@ disabled look for disabled choices in the results dropdown
     background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
 }
 
+.select2-results .select2-ajax-error {
+    background: rgba(255, 50, 50, .2);
+}
+
 .select2-more-results {
     background: #f4f4f4;
     display: list-item;

select2.js

@@ -443,6 +443,16 @@ the specific language governing permissions and limitations under the Apache Lic
                         // TODO - replace query.page with query so users have access to term, page, etc.
                         // added query as third paramter to keep backwards compatibility
                         var results = options.results(data, query.page, query);
+                        query.callback(results);
+                    },
+                    error: function(jqXHR, textStatus, errorThrown){
+                        var results = {
+                            hasError: true,
+                            jqXHR: jqXHR,
+                            textStatus: textStatus,
+                            errorThrown: errorThrown,
+                        };
+
                         query.callback(results);
                     }
                 });
@@ -1766,6 +1776,12 @@ the specific language governing permissions and limitations under the Apache Lic
                     return;
                 }
 
+                // handle ajax error
+                if(data.hasError !== undefined && checkFormatter(opts.formatAjaxError, "formatAjaxError")) {
+                    render("<li class='select2-ajax-error'>" + evaluate(opts.formatAjaxError, opts.element, data.jqXHR, data.textStatus, data.errorThrown) + "</li>");
+                    return;
+                }
+
                 // save context, if any
                 this.context = (data.context===undefined) ? null : data.context;
                 // create a default choice and prepend it to the list
@@ -3408,6 +3424,7 @@ the specific language governing permissions and limitations under the Apache Lic
         formatSelectionCssClass: function(data, container) {return undefined;},
         formatMatches: function (matches) { if (matches === 1) { return "One result is available, press enter to select it."; } return matches + " results are available, use up and down arrow keys to navigate."; },
         formatNoMatches: function () { return "No matches found"; },
+        formatAjaxError: function (jqXHR, textStatus, errorThrown) { return "Loading failed"; },
         formatInputTooShort: function (input, min) { var n = min - input.length; return "Please enter " + n + " or more character" + (n == 1? "" : "s"); },
         formatInputTooLong: function (input, max) { var n = input.length - max; return "Please delete " + n + " character" + (n == 1? "" : "s"); },
         formatSelectionTooBig: function (limit) { return "You can only select " + limit + " item" + (limit == 1 ? "" : "s"); },