I'm using Select2 4.0.0-rc.2.
The Options page states the following about initSelection
In the past, Select2 required an option called
initSelection
that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This has been replaced by thecurrent
method on the data adapter.
I only found examples for older versions of Select2 that use initSelection
(see Setting initial values on load with Select2 with Ajax)
How can I load default data with data adapter?
here is my initial code (is twig)
$("#{{ id }}").select2({
ajax: {
url: "{{ path(attr.path) }}",
dataType: 'json',
{% if attr.placeholder is defined %}
placeholder: '{{ attr.placeholder }}',
{% endif %}
delay: 250,
data: function (term) {
return term;
},
processResults: function (data) {
return {results: data};
}
},
templateResult: function(data){
return '<img width="30" src="'+data.image+'">'+data.text;
},
templateSelection: function(data){
return '<img width="30" src="'+data.image+'">'+data.text;
},
cache: true,
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 2
});
If it possible i want setup always visible options and have ajax other,
<select id="posow"></select>
for above select i do like this:
$(function () {
$.getJSON( "/f3/tokenize/PO_SoW", function(respond) {
$('#posow').select2({
multiple: true,
data: respond
});
});
});
respond from server is this:
[{id: 'nms', text: 'FATP'},
{id: 'nms', text: 'ATF Plan'},
{id: 'nms', text: 'Endorse Plan'},
{id: 'nms', text: 'Endorse Date'}
]
You have a detailed explanation on their docs. If you only need to load your data once you can do that using the following code (that was stripped from their docs page):
var $element = $('select').select2(); // the select element you are working with
var $request = $.ajax({
url: '/my/remote/source' // wherever your data is actually coming from
});
$request.then(function (data) {
// This assumes that the data comes back as an array of data objects
// The idea is that you are using the same callback as the old `initSelection`
for (var d = 0; d < data.length; d++) {
var item = data[d];
// Create the DOM option that is pre-selected by default
var option = new Option(data.text, data.id, true, true);
// Append it to the select
$element.append(option);
}
// Update the selected options that are displayed
$element.trigger('change');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With