CODEWITHSUNDEEP
jquery-select2
A.J.
A.J.

Reputation: 9025

Override Minimum length string of Select2

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.

Upvotes: 29

Views: 38334

Answers (5)

KRKR
KRKR

Reputation: 2825

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

}); }

Upvotes: -1

Yauheni Leaniuk
Yauheni Leaniuk

Reputation: 454

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

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

Upvotes: 3

Rohallah Hatami
Rohallah Hatami

Reputation: 569

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

Upvotes: 9

A.J.
A.J.

Reputation: 9025

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 ''; } },

Upvotes: 30

Paul
Paul

Reputation: 20091

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.

Upvotes: 43

Related Questions