Override Minimum length string of Select2

Question

Select2 Jquery Plugin

I was having hard time how to override the default message for minimum length input in jquery Select2.

by default the plugin gives the following message.

Default Text

Please enter 1 more characters

My requirement was to show, the following text

Required Text

Enter 1 Character

please share the solution. Thanks.

Chord

you can also use css if you just want to hide it completely: ` .select2-results__option.select2-results__message { display: none; } ` – Parthenopaeus

I want to override text and not hide it. – Chord

Answer 1

---

Solution

Here is the solution that i have found out.

Prior to v4

Initialize

$("input[name='cont_responsible'],input[name='corr_responsible'],input[name='prev_responsible'],input[name='pfmea_responsible']").select2({
            minimumInputLength: 1,
            formatInputTooShort: function () {
                return "Enter 1 Character";
            },  
});

---

Note

Do not forget to add this code in your document. ready function.

       $(document).ready(function () {
});

I shared my solution, any better solutions are welcome.

Thanks.

Using v4 and onwards

The following worked for V4. @Isaac Kleinman language: { inputTooShort: function () { return ''; } },

Chord

Doesn't look like it. – Flashy

This works for me in v4: language: { inputTooShort: function () { return ''; } }, – Flashy

Is it possible to alter when a select object was already initialized? – Loanloanda

Answer 2

The accepted answer does not work for Select2 v4. Expanding on the comment by @IsaacKleinman, the way to override the default messages for an individual Select2 instance is through the language property:

var opts = {
  language: {
    inputTooShort: function(args) {
      // args.minimum is the minimum required length
      // args.input is the user-typed text
      return "Type more stuff";
    },
    inputTooLong: function(args) {
      // args.maximum is the maximum allowed length
      // args.input is the user-typed text
      return "You typed too much";
    },
    errorLoading: function() {
      return "Error loading results";
    },
    loadingMore: function() {
      return "Loading more results";
    },
    noResults: function() {
      return "No results found";
    },
    searching: function() {
      return "Searching...";
    },
    maximumSelected: function(args) {
      // args.maximum is the maximum number of items the user may select
      return "Error loading results";
    }
  }
};
$('#mySelect').select2(opts);

To override the functions globally, call the set function on the defaults (according to the docs):

$.fn.select2.defaults.set("key", "value")

However, in our code we do it like this:

$.fn.select2.defaults.defaults['language'].searching = function(){
  return 'Custom searching message'
};

I don't know why we don't follow the docs, but it works.

Gimcrackery

There's seems to be no documentation about language options. The only way to find them all is to look at the source github.com/select2/select2/blob/master/src/js/select2/i18n/… – Taryn

Thanks for the usefull data it helped me a lot. select2 documentation is really incomplete. – Smasher

Answer 3

You can try this on version 4.0 or higher you can see reference for answer frome this link : issues reference

$("#select2").select2({
    minimumInputLength: 1,
  language: {
    inputTooShort: function() {
        return 'Please Add More Text';
    }
  }
});

Banderillero

Answer 4

If you are using django-select2, just add attributes to your form in forms.py:

 widget=BookSelect2Widget(
            attrs={'data-minimum-input-length': 1}
            )

Persia

Answer 5

Override the function behaviour like below

$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
formatMatches: function(matches) {
    return matches + $filter('translate')('label.matches.found');
},
formatNoMatches: function() {
    return $filter('translate')('noMatches.found');
},
formatInputTooShort: function(input, min) {
    var n = min - input.length;
    return $filter('translate')('label.please.enter ') + n + $filter('translate')(' more.characters') + (n == 1 ? "" : "s");
},
formatInputTooLong: function(input, max) {
    var n = input.length - max;
    return $filter('translate')('please.delete ') + n + $filter('translate')('')('delete.characters') + (n == 1 ? "" : "s");
},
formatSelectionTooBig: function(limit) {
    return $filter('translate')('select.only') + limit + $filter('translate')('select.item ') + (limit == 1 ? "" : "s");
},
formatLoadMore: function(pageNumber) {
    return $filter('translate')('load.results');
},
formatSearching: function() {
    return $filter('translate')('label.search');
}

}); }

Pickmeup