lavkach3

1
//
2
// For select 2
3
//
4
$(".select2").select2();
5

6
// Single Select Placeholder
7
$("#select2-with-placeholder").select2({
8
  placeholder: "Select a state",
9
  allowClear: true,
10
});
11

12
//
13
// Hiding the search box
14
//
15
$("#select2-search-hide").select2({
16
  minimumResultsForSearch: Infinity,
17
});
18

19
//
20
// Select With Icon
21
//
22
$("#select2-with-icons").select2({
23
  minimumResultsForSearch: Infinity,
24
  templateResult: iconFormat,
25
  templateSelection: iconFormat,
26
  escapeMarkup: function (es) {
27
    return es;
28
  },
29
});
30

31
function iconFormat(icon) {
32
  var originalOption = icon.element;
33
  if (!icon.id) {
34
    return icon.text;
35
  }
36
  var $icon =
37
    "<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
38
  return $icon;
39
}
40

41
//
42
// Limiting the number of selections
43
//
44
$("#select2-max-length").select2({
45
  maximumSelectionLength: 3,
46
  placeholder: "Select only maximum 3 items",
47
});
48

49
//
50
//multiple-select2-with-icons
51
//
52
$("#multiple-select2-with-icons").select2({
53
  minimumResultsForSearch: Infinity,
54
  templateResult: iconFormat,
55
  templateSelection: iconFormat,
56
  escapeMarkup: function (es) {
57
    return es;
58
  },
59
});
60

61
function iconFormat(icon) {
62
  var originalOption = icon.element;
63
  if (!icon.id) {
64
    return icon.text;
65
  }
66
  var $icon =
67
    "<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
68
  return $icon;
69
}
70

71
//
72
// DOM Events
73
//
74
var $selectEvent = $(".js-events");
75
$selectEvent.select2({
76
  placeholder: "DOM Events",
77
});
78
$selectEvent.on("select2:open", function (e) {
79
  alert("Open Event Fired.");
80
});
81
$selectEvent.on("select2:close", function (e) {
82
  alert("Close Event Fired.");
83
});
84
$selectEvent.on("select2:select", function (e) {
85
  alert("Select Event Fired.");
86
});
87
$selectEvent.on("select2:unselect", function (e) {
88
  alert("Unselect Event Fired.");
89
});
90

91
$selectEvent.on("change", function (e) {
92
  alert("Change Event Fired.");
93
});
94

95
//
96
// Programmatic access
97
//
98
var $select = $(".js-programmatic").select2();
99
var $selectMulti = $(".js-programmatic-multiple").select2();
100
$selectMulti.select2({
101
  placeholder: "Programmatic Events",
102
});
103
$(".js-programmatic-set-val").on("click", function () {
104
  $select.val("NM").trigger("change");
105
});
106

107
$(".js-programmatic-open").on("click", function () {
108
  $select.select2("open");
109
});
110
$(".js-programmatic-close").on("click", function () {
111
  $select.select2("close");
112
});
113

114
$(".js-programmatic-init").on("click", function () {
115
  $select.select2();
116
});
117
$(".js-programmatic-destroy").on("click", function () {
118
  $select.select2("destroy");
119
});
120

121
$(".js-programmatic-multi-set-val").on("click", function () {
122
  $selectMulti.val(["UT", "NM"]).trigger("change");
123
});
124
$(".js-programmatic-multi-clear").on("click", function () {
125
  $selectMulti.val(null).trigger("change");
126
});
127

128
//
129
// Loading array data
130
//
131
var data = [
132
  { id: 0, text: "Web Designer" },
133
  { id: 1, text: "Mobile App Developer" },
134
  { id: 2, text: "Graphics Designer" },
135
  { id: 3, text: "Hacker" },
136
  { id: 4, text: "Animation Designer" },
137
];
138

139
$("#select2-data-array").select2({
140
  data: data,
141
});
142

143
//
144
// Loading remote data
145
//
146
$(".select2-data-ajax").select2({
147
  placeholder: "Loading remote data",
148
  ajax: {
149
    url: "http://api.github.com/search/repositories",
150
    dataType: "json",
151
    delay: 250,
152
    data: function (params) {
153
      return {
154
        q: params.term, // search term
155
        page: params.page,
156
      };
157
    },
158
    processResults: function (data, params) {
159
      // parse the results into the format expected by Select2
160
      // since we are using custom formatting functions we do not need to
161
      // alter the remote JSON data, except to indicate that infinite
162
      // scrolling can be used
163
      params.page = params.page || 1;
164

165
      return {
166
        results: data.items,
167
        pagination: {
168
          more: params.page * 30 < data.total_count,
169
        },
170
      };
171
    },
172
    cache: true,
173
  },
174
  escapeMarkup: function (markup) {
175
    return markup;
176
  }, // let our custom formatter work
177
  minimumInputLength: 1,
178
  templateResult: formatRepo, // omitted for brevity, see the source of this page
179
  templateSelection: formatRepoSelection, // omitted for brevity, see the source of this page
180
});
181

182
function formatRepo(repo) {
183
  if (repo.loading) return repo.text;
184

185
  var markup =
186
    "<div class='select2-result-repository clearfix'>" +
187
    "<div class='select2-result-repository__avatar'><img src='" +
188
    repo.owner.avatar_url +
189
    "' /></div>" +
190
    "<div class='select2-result-repository__meta'>" +
191
    "<div class='select2-result-repository__title'>" +
192
    repo.full_name +
193
    "</div>";
194

195
  if (repo.description) {
196
    markup +=
197
      "<div class='select2-result-repository__description'>" +
198
      repo.description +
199
      "</div>";
200
  }
201

202
  markup +=
203
    "<div class='select2-result-repository__statistics'>" +
204
    "<div class='select2-result-repository__forks'><i class='la la-code-fork mr-0'></i> " +
205
    repo.forks_count +
206
    " Forks</div>" +
207
    "<div class='select2-result-repository__stargazers'><i class='la la-star-o mr-0'></i> " +
208
    repo.stargazers_count +
209
    " Stars</div>" +
210
    "<div class='select2-result-repository__watchers'><i class='la la-eye mr-0'></i> " +
211
    repo.watchers_count +
212
    " Watchers</div>" +
213
    "</div>" +
214
    "</div></div>";
215

216
  return markup;
217
}
218

219
function formatRepoSelection(repo) {
220
  return repo.full_name || repo.text;
221
}
222

223
//
224
// Multiple languages
225
//
226
$("#select2-language").select2({
227
  language: "es",
228
});
229

230
//
231
// Theme support
232
//
233
$("#select2-theme").select2({
234
  placeholder: "Classic Theme",
235
  theme: "classic",
236
});
237

238
//
239
//templete with flag icons
240
//
241
$("#template-with-flag-icons").select2({
242
  minimumResultsForSearch: Infinity,
243
  templateResult: iconFormat,
244
  templateSelection: iconFormat,
245
  escapeMarkup: function (es) {
246
    return es;
247
  },
248
});
249

250
function iconFormat(ficon) {
251
  var originalOption = ficon.element;
252
  if (!ficon.id) {
253
    return ficon.text;
254
  }
255
  var $ficon =
256
    "<i class='flag-icon flag-icon-" +
257
    $(ficon.element).data("flag") +
258
    "'></i>" +
259
    ficon.text;
260
  return $ficon;
261
}
262

263
//
264
// Tagging support
265
//
266
$("#select2-with-tags").select2({
267
  tags: true,
268
});
269

270
//
271
// Automatic tokenization
272
//
273
$("#select2-with-tokenizer").select2({
274
  tags: true,
275
  tokenSeparators: [",", " "],
276
});
277

278
//
279
// RTL support
280
//
281
$("#select2-rtl-multiple").select2({
282
  placeholder: "RTL Select",
283
  dir: "rtl",
284
});
285

286
//
287
// Language Files
288
//
289
$("#select2-transliteration-multiple").select2({
290
  placeholder: "Type 'aero'",
291
});
292

293
//
294
// Color Options
295
//
296

297
//
298
// Background Color
299
//
300
$(".select2-with-bg").each(function (i, obj) {
301
  var variation = "",
302
    textVariation = "",
303
    textColor = "";
304
  var color = $(this).data("bgcolor");
305
  variation = $(this).data("bgcolor-variation");
306
  textVariation = $(this).data("text-variation");
307
  textColor = $(this).data("text-color");
308
  if (textVariation !== "") {
309
    textVariation = " " + textVariation;
310
  }
311
  if (variation !== "") {
312
    variation = " bg-" + variation;
313
  }
314
  var className =
315
    "bg-" +
316
    color +
317
    variation +
318
    " " +
319
    textColor +
320
    textVariation +
321
    " border-" +
322
    color;
323

324
  $(this).select2({
325
    containerCssClass: className,
326
  });
327
});
328

329
//
330
// Menu Background Color
331
//
332
$(".select2-with-menu-bg").each(function (i, obj) {
333
  var variation = "",
334
    textVariation = "",
335
    textColor = "";
336
  var color = $(this).data("bgcolor");
337
  variation = $(this).data("bgcolor-variation");
338
  textVariation = $(this).data("text-variation");
339
  textColor = $(this).data("text-color");
340
  if (variation !== "") {
341
    variation = " bg-" + variation;
342
  }
343
  if (textVariation !== "") {
344
    textVariation = " " + textVariation;
345
  }
346
  var className =
347
    "bg-" +
348
    color +
349
    variation +
350
    " " +
351
    textColor +
352
    textVariation +
353
    " border-" +
354
    color;
355

356
  $(this).select2({
357
    dropdownCssClass: className,
358
  });
359
});
360

361
//
362
// Full Background Color
363
//
364
$(".select2-with-full-bg").each(function (i, obj) {
365
  var variation = "",
366
    textVariation = "",
367
    textColor = "";
368
  var color = $(this).data("bgcolor");
369
  variation = $(this).data("bgcolor-variation");
370
  textVariation = $(this).data("text-variation");
371
  textColor = $(this).data("text-color");
372
  if (variation !== "") {
373
    variation = " bg-" + variation;
374
  }
375
  if (textVariation !== "") {
376
    textVariation = " " + textVariation;
377
  }
378
  var className =
379
    "bg-" +
380
    color +
381
    variation +
382
    " " +
383
    textColor +
384
    textVariation +
385
    " border-" +
386
    color;
387

388
  $(this).select2({
389
    containerCssClass: className,
390
    dropdownCssClass: className,
391
  });
392
});
393

394
$("select[data-text-color]").each(function (i, obj) {
395
  var text = $(this).data("text-color"),
396
    textVariation;
397
  textVariation = $(this).data("text-variation");
398
  if (textVariation !== "") {
399
    textVariation = " " + textVariation;
400
  }
401
  $(this)
402
    .next(".select2")
403
    .find(".select2-selection__rendered")
404
    .addClass(text + textVariation);
405
});
406

407
//
408
// Border Color
409
//
410
$(".select2-with-border").each(function (i, obj) {
411
  var variation = "",
412
    textVariation = "",
413
    textColor = "";
414
  var color = $(this).data("border-color");
415
  textVariation = $(this).data("text-variation");
416
  variation = $(this).data("border-variation");
417
  textColor = $(this).data("text-color");
418
  if (textVariation !== "") {
419
    textVariation = " " + textVariation;
420
  }
421
  if (variation !== "") {
422
    variation = " border-" + variation;
423
  }
424

425
  var className =
426
    "border-" + color + " " + variation + " " + textColor + textVariation;
427

428
  $(this).select2({
429
    containerCssClass: className,
430
  });
431
});
432