5

I have a simple select2 init which I want to be disabled by default without chaining a .select2("enable", false) afterwards.

HTML:

<input type='hidden' value="192" data-init-text='Bla bla' name="input" id="test" style="width:300px;" />

JS:

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 3,
        placeholder: "Search",
        enable: "false", // I want this to be working!
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    types: ["exercise"],
                    limit: -1,
                    term: term
                };
            },
            results: function(data, page ) {
                return { results: data.results.exercise }
            }
        },
        formatResult: function(exercise) { 
            return "<div class='select2-user-result'>" + exercise.term + "</div>"; 
        },
        formatSelection: function(exercise) { 
            return exercise.term; 
        },
        initSelection : function (element, callback) {
            var elementText = $(element).attr('data-init-text');
            callback({"term":elementText});
        }
    });
});

See my JSFiddle for an example. Select2 Docs here.

DonJuwe
  • 4,477
  • 3
  • 34
  • 59
  • From the documentation you provided, that plugin does not support such an option in its constructor. I understand you *want this to be working*, but the functionality is just not there. You can either modify the plugin, or live with a chained call to `select2("enable", false)`. – Frédéric Hamidi Aug 04 '14 at 08:58

3 Answers3

12

Simply add the disabledattribute to your input.

<input disabled type='hidden' value="192" data-init-text='Bla bla' name="input" id="test" style="width:300px;" />

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 3,
        placeholder: "Search",
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    types: ["exercise"],
                    limit: -1,
                    term: term
                };
            },
            results: function(data, page ) {
                return { results: data.results.exercise }
            }
        },
        formatResult: function(exercise) { 
            return "<div class='select2-user-result'>" + exercise.term + "</div>"; 
        },
        formatSelection: function(exercise) { 
            return exercise.term; 
        },
        initSelection : function (element, callback) {
            var elementText = $(element).attr('data-init-text');
            callback({"term":elementText});
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2.0/select2.min.js"></script>
<input disabled type='hidden' value="192" data-init-text='Bla bla' name="input" id="test" style="width:300px;" />
Jul13nT
  • 657
  • 2
  • 9
  • 19
2

Try this:

Fiddle

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 3,
        placeholder: "Search",
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    types: ["exercise"],
                    limit: -1,
                    term: term
                };
            },
            results: function(data, page ) {
                return { results: data.results.exercise }
            }
        },
        formatResult: function(exercise) { 
            return "<div class='select2-user-result'>" + exercise.term + "</div>"; 
        },
        formatSelection: function(exercise) { 
            return exercise.term; 
        },
        initSelection : function (element, callback) {
            var elementText = $(element).attr('data-init-text');
            callback({"term":elementText});
        }
    }).select2("enable", false);
});
Stiger
  • 1,189
  • 2
  • 14
  • 29
0

I am including the latest working code below:

$("your-selector").select2({
  // configuration params
}).prop("disabled", true);

Notice the prop method. Pretty simple, right?

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
maksbd19
  • 3,785
  • 28
  • 37