Skip to content

Commit 7e6782d

Browse files
kevin-brownkevin-brown
committed
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.
1 parent 28c56e7 commit 7e6782d

8 files changed

Lines changed: 140 additions & 3 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ define('select2/results',[
185185

186186
Results.prototype.displayMessage = function (params) {
187187
this.clear();
188+
this.hideLoading();
188189

189190
var $message = $('<li role="treeitem" class="option"></li>');
190191

@@ -196,6 +197,8 @@ define('select2/results',[
196197
};
197198

198199
Results.prototype.append = function (data) {
200+
this.hideLoading();
201+
199202
var $options = [];
200203

201204
if (data.length === 0) {
@@ -261,6 +264,26 @@ define('select2/results',[
261264
});
262265
};
263266

267+
Results.prototype.showLoading = function (params) {
268+
this.hideLoading();
269+
270+
var loadingMore = this.options.get('translations').get('loadingMore');
271+
272+
var loading = {
273+
disabled: true,
274+
loading: true,
275+
text: loadingMore(params)
276+
};
277+
var $loading = this.option(loading);
278+
$loading.className += ' loading-results';
279+
280+
this.$results.prepend($loading);
281+
};
282+
283+
Results.prototype.hideLoading = function () {
284+
this.$results.find('.loading-results').remove();
285+
};
286+
264287
Results.prototype.option = function (data) {
265288
var option = document.createElement('li');
266289
option.className = 'option';
@@ -353,6 +376,10 @@ define('select2/results',[
353376
}
354377
});
355378

379+
container.on('query', function (params) {
380+
self.showLoading(params);
381+
});
382+
356383
container.on('select', function () {
357384
if (!container.isOpen()) {
358385
return;

‎dist/js/select2.amd.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ define('select2/results',[
185185

186186
Results.prototype.displayMessage = function (params) {
187187
this.clear();
188+
this.hideLoading();
188189

189190
var $message = $('<li role="treeitem" class="option"></li>');
190191

@@ -196,6 +197,8 @@ define('select2/results',[
196197
};
197198

198199
Results.prototype.append = function (data) {
200+
this.hideLoading();
201+
199202
var $options = [];
200203

201204
if (data.length === 0) {
@@ -261,6 +264,26 @@ define('select2/results',[
261264
});
262265
};
263266

267+
Results.prototype.showLoading = function (params) {
268+
this.hideLoading();
269+
270+
var loadingMore = this.options.get('translations').get('loadingMore');
271+
272+
var loading = {
273+
disabled: true,
274+
loading: true,
275+
text: loadingMore(params)
276+
};
277+
var $loading = this.option(loading);
278+
$loading.className += ' loading-results';
279+
280+
this.$results.prepend($loading);
281+
};
282+
283+
Results.prototype.hideLoading = function () {
284+
this.$results.find('.loading-results').remove();
285+
};
286+
264287
Results.prototype.option = function (data) {
265288
var option = document.createElement('li');
266289
option.className = 'option';
@@ -353,6 +376,10 @@ define('select2/results',[
353376
}
354377
});
355378

379+
container.on('query', function (params) {
380+
self.showLoading(params);
381+
});
382+
356383
container.on('select', function () {
357384
if (!container.isOpen()) {
358385
return;

‎dist/js/select2.full.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9720,6 +9720,7 @@ define('select2/results',[
97209720

97219721
Results.prototype.displayMessage = function (params) {
97229722
this.clear();
9723+
this.hideLoading();
97239724

97249725
var $message = $('<li role="treeitem" class="option"></li>');
97259726

@@ -9731,6 +9732,8 @@ define('select2/results',[
97319732
};
97329733

97339734
Results.prototype.append = function (data) {
9735+
this.hideLoading();
9736+
97349737
var $options = [];
97359738

97369739
if (data.length === 0) {
@@ -9796,6 +9799,26 @@ define('select2/results',[
97969799
});
97979800
};
97989801

9802+
Results.prototype.showLoading = function (params) {
9803+
this.hideLoading();
9804+
9805+
var loadingMore = this.options.get('translations').get('loadingMore');
9806+
9807+
var loading = {
9808+
disabled: true,
9809+
loading: true,
9810+
text: loadingMore(params)
9811+
};
9812+
var $loading = this.option(loading);
9813+
$loading.className += ' loading-results';
9814+
9815+
this.$results.prepend($loading);
9816+
};
9817+
9818+
Results.prototype.hideLoading = function () {
9819+
this.$results.find('.loading-results').remove();
9820+
};
9821+
97999822
Results.prototype.option = function (data) {
98009823
var option = document.createElement('li');
98019824
option.className = 'option';
@@ -9888,6 +9911,10 @@ define('select2/results',[
98889911
}
98899912
});
98909913

9914+
container.on('query', function (params) {
9915+
self.showLoading(params);
9916+
});
9917+
98919918
container.on('select', function () {
98929919
if (!container.isOpen()) {
98939920
return;

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -613,6 +613,7 @@ define('select2/results',[
613613

614614
Results.prototype.displayMessage = function (params) {
615615
this.clear();
616+
this.hideLoading();
616617

617618
var $message = $('<li role="treeitem" class="option"></li>');
618619

@@ -624,6 +625,8 @@ define('select2/results',[
624625
};
625626

626627
Results.prototype.append = function (data) {
628+
this.hideLoading();
629+
627630
var $options = [];
628631

629632
if (data.length === 0) {
@@ -689,6 +692,26 @@ define('select2/results',[
689692
});
690693
};
691694

695+
Results.prototype.showLoading = function (params) {
696+
this.hideLoading();
697+
698+
var loadingMore = this.options.get('translations').get('loadingMore');
699+
700+
var loading = {
701+
disabled: true,
702+
loading: true,
703+
text: loadingMore(params)
704+
};
705+
var $loading = this.option(loading);
706+
$loading.className += ' loading-results';
707+
708+
this.$results.prepend($loading);
709+
};
710+
711+
Results.prototype.hideLoading = function () {
712+
this.$results.find('.loading-results').remove();
713+
};
714+
692715
Results.prototype.option = function (data) {
693716
var option = document.createElement('li');
694717
option.className = 'option';
@@ -781,6 +804,10 @@ define('select2/results',[
781804
}
782805
});
783806

807+
container.on('query', function (params) {
808+
self.showLoading(params);
809+
});
810+
784811
container.on('select', function () {
785812
if (!container.isOpen()) {
786813
return;

‎dist/js/select2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,8 @@ <h2>Example code</h2>
544544
},
545545
minimumInputLength: 1,
546546
templateResult: function (repo) {
547+
if (repo.loading) return repo.text;
548+
547549
var markup = '<div class="clearfix">' +
548550
'<div class="col-sm-1">' +
549551
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +

‎src/js/select2/results.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ define([
3131

3232
Results.prototype.displayMessage = function (params) {
3333
this.clear();
34+
this.hideLoading();
3435

3536
var $message = $('<li role="treeitem" class="option"></li>');
3637

@@ -42,6 +43,8 @@ define([
4243
};
4344

4445
Results.prototype.append = function (data) {
46+
this.hideLoading();
47+
4548
var $options = [];
4649

4750
if (data.length === 0) {
@@ -107,6 +110,26 @@ define([
107110
});
108111
};
109112

113+
Results.prototype.showLoading = function (params) {
114+
this.hideLoading();
115+
116+
var loadingMore = this.options.get('translations').get('loadingMore');
117+
118+
var loading = {
119+
disabled: true,
120+
loading: true,
121+
text: loadingMore(params)
122+
};
123+
var $loading = this.option(loading);
124+
$loading.className += ' loading-results';
125+
126+
this.$results.prepend($loading);
127+
};
128+
129+
Results.prototype.hideLoading = function () {
130+
this.$results.find('.loading-results').remove();
131+
};
132+
110133
Results.prototype.option = function (data) {
111134
var option = document.createElement('li');
112135
option.className = 'option';
@@ -199,6 +222,10 @@ define([
199222
}
200223
});
201224

225+
container.on('query', function (params) {
226+
self.showLoading(params);
227+
});
228+
202229
container.on('select', function () {
203230
if (!container.isOpen()) {
204231
return;

0 commit comments

Comments
 (0)