Select2 - Use Json As Local Data

I can get this to work... var options = [{id: 1, text: 'Adair, Charles'}] $('#names').select2({ data: options, }) But i cant work out how to get from here... alert(JSON.stri

Solution 1:

Load data from a local array

The webpage of jquery-select2 with the examples contains a demo to use Select2with local data (an array).

The html

<inputtype="hidden"id="e10" style="width:300px"/>

The javascript

$(document).ready(function() { 

    var sampleArray = [{id:0,text:'enhancement'}, {id:1,text:'bug'}
                       ,{id:2,text:'duplicate'},{id:3,text:'invalid'}
                       ,{id:4,text:'wontfix'}];

    $("#e10").select2({ data: sampleArray });

});

Select2 load data if array has no text property

For your question the example e10_2 is relevant

<inputtype="hidden"id="e10_2" style="width:300px"/>

To achive that you need the function format() as seen below:

$(document).ready(function() { 

    // tell Select2 to use the property name for the textfunctionformat(item) { return item.name; };

    var names = [{"id":"1","name":"Adair,James"}
             , {"id":"2","name":"Anderson,Peter"}
             , {"id":"3","name":"Armstrong,Ryan"}]

    $("#e10_2").select2({
            data:{ results: names, text: 'name' },
            formatSelection: format,
            formatResult: format                        
    });

});

This is the output:

Hint

To see the source code of each example it is best to use the network tab of the chrome dev tools and take a look of the html source before javascript kicks in.

Solution 2:

Just to add. This also worked for me:

HTML:

<select id="names" name="names"class="form-control"></select>

Javascript

$('#names').select2();

var options = $('#names');

$.each(sampleArray, function() {
    options.append($("<option />").val(this.id).text(this.name));
});

Solution 3:

As an update for this old post, having custom properties for id and text is not directly supported anymore since 4.0.0+ version.

See here on "The id and text properties are strictly enforced" text block. You must create a $.map object as a workaround.

Even more, working with an [input type="hidden"] is now deprecated as all core select2 options now support the [select] html object.

Have a look to John S' answer on this post as well.