Select2 undefined issue

Question

The following function gets json data from URL and populates a select element with jQuery. I am than using Select2 to transform that drop down in a field with autocomplete function.

Everything works fine apart from the writing 'undefined' that I get as soon as the select elements get displayed. The autocomplete and drop down work perfectly. I have tried to use the data placeholder even by adding an empty 'option' element but no success.

function CitiesList(callback){
 $.getJSON(document.URL+'getCities/sdfsfs', function(data){
    var html = '';
    var len = data.length;
    var option = '<option></option>';
    for (var i = 0; i< len; i++) {
        html += '<option value="' + data[i] + '">' + data[i] + '</option>';
    }
    $('.select_cities select').append(option);
    $('.select_cities select').append(html);
    if(callback && typeof callback == 'function'){
        callback.call(null);
    }

});
}

            <select data-placeholder="Select a city" name="cities" id="cities">
            </select>

'select_cities' is the div wrapper around the select element.

Answer 1

This is working now in 4.0. The message sent to the results formatter can be configured either in the object (see their GitHub example repo.text) or hard coded within the function that is called from the templateResult property. e.g.:

templateResult: formatResult,

//...

function formatResult (result) {

if (result.loading) return "Searching...";

Configuration wasn't the easiest thing to find since looking for the string "Searching..." within their their GitHub example had zero hits, but in retrospect is quite intuitive.

Answer 2

I ran into this recently. It looks like newer versions of Select2 have trouble when a default option is set without a corresponding value or when value is an empty string, for example:

<option value="" selected="selected">Select something</option>

Either explicitly define a non empty value such as value="0" or set placeholderOption: 'first' to force Select2 to use the first option as a default:

$('#select2-field').select2({
    placeholderOption: 'first'
});

Answer 3

This issue has been addressed in the latest (3.4.2) version of select2. Upgrade and you should be good to go!