web-dev-qa-db-ja.com

Select2の最小長の文字列を上書き

Select2 Jqueryプラグイン

Jquery Select2で最小長入力のデフォルトメッセージをオーバーライドする方法に苦労していました。

デフォルトでは、プラグインは次のメッセージを表示します。

デフォルトのテキスト

Please enter 1 more characters

私の要件は、次のテキストを表示することでした

必要なテキスト

Enter 1 Character

解決策を共有してください。ありがとう。

jquery-select2
19
A.J.

解決

これが私が見つけた解決策です。

V4より前

初期化

_$("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";
            },  
});
_

注意

このコードをドキュメントに追加することを忘れないでください。レディ機能。

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

私は自分の解決策を共有しましたが、もっと良い解決策があれば歓迎します。

ありがとう。

V4以降の使用

以下はV4で動作しました。 @アイザッククラインマンlanguage: { inputTooShort: function () { return ''; } },

22
A.J.

受け入れられた回答はSelect2 v4では機能しません。 @IsaacKleinmanによるコメントを拡張して、個々のSelect2インスタンスのデフォルトメッセージをオーバーライドする方法は、languageプロパティを使用することです。

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

関数をグローバルにオーバーライドするには、デフォルトでset関数を呼び出します（ ドキュメントによると ）。

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

ただし、コードでは次のようにします。

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

なぜドキュメントをフォローしないのかわかりませんが、動作します。

27
Paul

バージョン4.0以降でこれを試すことができます

問題の参照

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