Set language not working select2

Question

<select data-placeholder="Select or type" data-minlength="2" multiple = "multiple" name='arrAval' id='listAval' class="js-basic-multiple form-control" required>

So here is the issue:

As the documentation says I should be able to set language for this component:

$(".js-basic-multiple").select2({
        language: "language-wanted"
    });

It's returning "no results found" no matter which language I set. Just to be clear, as in https://select2.github.io/examples.html#matcher it returns "No se encontraron resultados" for 'language:"es"'

Are you making sure to include the JS file for the language you want as well as setting the `language` option during initialization? — Kevin Brown, Mar 06 '16 at 20:01
You were right, I thought it would change just by changing its property. I had to add the references. I am posting the answer for this question. Thank you very much. — Matheus, Mar 09 '16 at 23:11

score 41 · Accepted Answer · edited May 23 '17 at 11:54

41

<script src="libs/select2-4.0.2-rc.1/dist/js/i18n/<here-goes-language>.js"></script>

The include above was missing as Keving Brown said. As the example quoted in the question the file for spanish would be "es.js"

edited May 23 '17 at 11:54

Community

1
1

answered Mar 09 '16 at 23:12

Matheus

730
1
5
13

score 20 · Answer 2 · answered Apr 10 '17 at 12:01

Add script like this after select2 plugin

$.fn.select2.amd.define('select2/i18n/ru',[],function () {
    // Russian
    return {
        errorLoading: function () {
            return 'Результат не может быть загружен.';
        },
        inputTooLong: function (args) {
            var overChars = args.input.length - args.maximum;
            var message = 'Пожалуйста, удалите ' + overChars + ' символ';
            if (overChars >= 2 && overChars <= 4) {
                message += 'а';
            } else if (overChars >= 5) {
                message += 'ов';
            }
            return message;
        },
        inputTooShort: function (args) {
            var remainingChars = args.minimum - args.input.length;

            var message = 'Пожалуйста, введите ' + remainingChars + ' или более символов';

            return message;
        },
        loadingMore: function () {
            return 'Загружаем ещё ресурсы…';
        },
        maximumSelected: function (args) {
            var message = 'Вы можете выбрать ' + args.maximum + ' элемент';

            if (args.maximum  >= 2 && args.maximum <= 4) {
                message += 'а';
            } else if (args.maximum >= 5) {
                message += 'ов';
            }

            return message;
        },
        noResults: function () {
          return 'Ничего не найдено';
        },
        searching: function () {
          return 'Поиск…';
        }
    };
});

set option

$(".js-basic-multiple").select2({
    language: "ru"
});

score 5 · Answer 3 · answered May 24 '20 at 15:24

5

CDN scripts:

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/[culture-name].js"></script>

answered May 24 '20 at 15:24

LazZiya

3,746
2
13
26

score 2 · Answer 4 · answered Aug 11 '20 at 08:25

2

If you use Webpack, you can set the default language like that (example for french) :

require('select2');
$.fn.select2.amd.define('select2/i18n/fr',[],require("select2/src/js/select2/i18n/fr"));

answered Aug 11 '20 at 08:25

Ehcnalb

431
2
13

score 0 · Answer 5 · answered Jan 16 '21 at 21:00

Additional to @SummerRain's answer, if you have loaded the language file into your page, you can use below way to set the default language for all select2, instead of one by one.

$.fn.select2.defaults.set("language", $.fn.select2.amd.require("select2/i18n/fr"));

select2 uses amd to define its dependencies as you can see from $.fn.select2.amd. "select2/i18n/fr" is the amd module name for the french language definitions.

Set language not working select2

5 Answers5

Linked