Display a loading message when searching

Now when searching, a loading message is prepended to the top of
the results. This replaces the old spinner image and allows for it
to be translated across different languages.

The loading message can be styled differently and is passed
through the results formatters.

dist/js/select2.amd.full.js

@@ -185,6 +185,7 @@ define('select2/results',[
 
   Results.prototype.displayMessage = function (params) {
     this.clear();
+    this.hideLoading();
 
     var $message = $('<li role="treeitem" class="option"></li>');
 
@@ -196,6 +197,8 @@ define('select2/results',[
   };
 
   Results.prototype.append = function (data) {
+    this.hideLoading();
+
     var $options = [];
 
     if (data.length === 0) {
@@ -261,6 +264,26 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.showLoading = function (params) {
+    this.hideLoading();
+
+    var loadingMore = this.options.get('translations').get('loadingMore');
+
+    var loading = {
+      disabled: true,
+      loading: true,
+      text: loadingMore(params)
+    };
+    var $loading = this.option(loading);
+    $loading.className += ' loading-results';
+
+    this.$results.prepend($loading);
+  };
+
+  Results.prototype.hideLoading = function () {
+    this.$results.find('.loading-results').remove();
+  };
+
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
     option.className = 'option';
@@ -353,6 +376,10 @@ define('select2/results',[
       }
     });
 
+    container.on('query', function (params) {
+      self.showLoading(params);
+    });
+
     container.on('select', function () {
       if (!container.isOpen()) {
         return;

dist/js/select2.amd.js

@@ -185,6 +185,7 @@ define('select2/results',[
 
   Results.prototype.displayMessage = function (params) {
     this.clear();
+    this.hideLoading();
 
     var $message = $('<li role="treeitem" class="option"></li>');
 
@@ -196,6 +197,8 @@ define('select2/results',[
   };
 
   Results.prototype.append = function (data) {
+    this.hideLoading();
+
     var $options = [];
 
     if (data.length === 0) {
@@ -261,6 +264,26 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.showLoading = function (params) {
+    this.hideLoading();
+
+    var loadingMore = this.options.get('translations').get('loadingMore');
+
+    var loading = {
+      disabled: true,
+      loading: true,
+      text: loadingMore(params)
+    };
+    var $loading = this.option(loading);
+    $loading.className += ' loading-results';
+
+    this.$results.prepend($loading);
+  };
+
+  Results.prototype.hideLoading = function () {
+    this.$results.find('.loading-results').remove();
+  };
+
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
     option.className = 'option';
@@ -353,6 +376,10 @@ define('select2/results',[
       }
     });
 
+    container.on('query', function (params) {
+      self.showLoading(params);
+    });
+
     container.on('select', function () {
       if (!container.isOpen()) {
         return;

dist/js/select2.full.js

@@ -9720,6 +9720,7 @@ define('select2/results',[
 
   Results.prototype.displayMessage = function (params) {
     this.clear();
+    this.hideLoading();
 
     var $message = $('<li role="treeitem" class="option"></li>');
 
@@ -9731,6 +9732,8 @@ define('select2/results',[
   };
 
   Results.prototype.append = function (data) {
+    this.hideLoading();
+
     var $options = [];
 
     if (data.length === 0) {
@@ -9796,6 +9799,26 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.showLoading = function (params) {
+    this.hideLoading();
+
+    var loadingMore = this.options.get('translations').get('loadingMore');
+
+    var loading = {
+      disabled: true,
+      loading: true,
+      text: loadingMore(params)
+    };
+    var $loading = this.option(loading);
+    $loading.className += ' loading-results';
+
+    this.$results.prepend($loading);
+  };
+
+  Results.prototype.hideLoading = function () {
+    this.$results.find('.loading-results').remove();
+  };
+
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
     option.className = 'option';
@@ -9888,6 +9911,10 @@ define('select2/results',[
       }
     });
 
+    container.on('query', function (params) {
+      self.showLoading(params);
+    });
+
     container.on('select', function () {
       if (!container.isOpen()) {
         return;

dist/js/select2.js

@@ -613,6 +613,7 @@ define('select2/results',[
 
   Results.prototype.displayMessage = function (params) {
     this.clear();
+    this.hideLoading();
 
     var $message = $('<li role="treeitem" class="option"></li>');
 
@@ -624,6 +625,8 @@ define('select2/results',[
   };
 
   Results.prototype.append = function (data) {
+    this.hideLoading();
+
     var $options = [];
 
     if (data.length === 0) {
@@ -689,6 +692,26 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.showLoading = function (params) {
+    this.hideLoading();
+
+    var loadingMore = this.options.get('translations').get('loadingMore');
+
+    var loading = {
+      disabled: true,
+      loading: true,
+      text: loadingMore(params)
+    };
+    var $loading = this.option(loading);
+    $loading.className += ' loading-results';
+
+    this.$results.prepend($loading);
+  };
+
+  Results.prototype.hideLoading = function () {
+    this.$results.find('.loading-results').remove();
+  };
+
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
     option.className = 'option';
@@ -781,6 +804,10 @@ define('select2/results',[
       }
     });
 
+    container.on('query', function (params) {
+      self.showLoading(params);
+    });
+
     container.on('select', function () {
       if (!container.isOpen()) {
         return;

docs/examples.html

@@ -544,6 +544,8 @@ $.fn.select2.amd.require(
     },
     minimumInputLength: 1,
     templateResult: function (repo) {
+      if (repo.loading) return repo.text;
+
       var markup = '<div class="clearfix">' +
         '<div class="col-sm-1">' +
           '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +

src/js/select2/results.js

@@ -31,6 +31,7 @@ define([
 
   Results.prototype.displayMessage = function (params) {
     this.clear();
+    this.hideLoading();
 
     var $message = $('<li role="treeitem" class="option"></li>');
 
@@ -42,6 +43,8 @@ define([
   };
 
   Results.prototype.append = function (data) {
+    this.hideLoading();
+
     var $options = [];
 
     if (data.length === 0) {
@@ -107,6 +110,26 @@ define([
     });
   };
 
+  Results.prototype.showLoading = function (params) {
+    this.hideLoading();
+
+    var loadingMore = this.options.get('translations').get('loadingMore');
+
+    var loading = {
+      disabled: true,
+      loading: true,
+      text: loadingMore(params)
+    };
+    var $loading = this.option(loading);
+    $loading.className += ' loading-results';
+
+    this.$results.prepend($loading);
+  };
+
+  Results.prototype.hideLoading = function () {
+    this.$results.find('.loading-results').remove();
+  };
+
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
     option.className = 'option';
@@ -199,6 +222,10 @@ define([
       }
     });
 
+    container.on('query', function (params) {
+      self.showLoading(params);
+    });
+
     container.on('select', function () {
       if (!container.isOpen()) {
         return;