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"'

Witty

Are you making sure to include the JS file for the language you want as well as setting the language option during initialization? – Motivation

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. – Witty

Answer 1

<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"

Witty

Answer 2

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"
});

Ology

Answer 3

CDN scripts:

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

Machismo

Answer 4

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"));

Rubbery

Answer 5

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.

Aggrandize

Answer 6

This is the cdn for the french translation :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/fr.js"></script>

Duly