select2 4.0 AJAX pre-fill howto?

Question

I've already read this, this, this and according to the documentation the most important here, but none of them work for me. I'm trying to use AJAX select2. I'm trying to make a generic "select" item.

So for all the elements that have a data-select2-json attribute, i apply a select2 with the ajax URL that is in the data-select2-json value.

$('[data-select2-json!=""][data-select2-json]').each(function() {
    var url = $(this).attr('data-select2-json');
    var pg_size = $(this).attr('data-select2-page-size') | 30;
    $(this).select2({
        language: language_code,
        tokenSeparators: [',', ' '],
        ajax: {
            url: url,
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    q: params.term, // -> q=[search term]
                    page: params.page // -> page=[no page]
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                console.log(data.items);
                return {
                    results: data.items,
                    pagination: {
                      more: (params.page * pg_size) < data.total
                    }
                };
            },
            cache: true
        },
        // let our custom formatter work
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });
});

It works well!

JSON the server sends is always formatted like this:

{"items":
    [{"item": "Fran\u00e7ais", "id": 1},
     {"item": "Finlandais", "id": 5},
     {"item": "Chinois simplifi\u00e9", "id": 15}
    ],
"total": 3}

It's very close to the AJAX sample you can find in the documentation. My problem is AJAX initiatilize: I want either to add the values in the HTML:

<select multiple="multiple" class="form-control"
        data-select2-json="/fr/chez-moi/tags/langues"
        multiple="multiple"
        name="known_languages">
    <option value="1" selected="selected">Français</option>
    <option value="2" selected="selected">Chinois simplifié</option>
</select>

and then initialize with select2 (= the code $(this).select2({.. above ) but this doesnt work and gives me blank values:

NB: the solution here given by Kevin Brown doesn't work either and gives me exactly the same result.

The other solution is to ask in AJAX to the URL with a parameter like "&init=1" (or something like that) so the server will send results with added parameters like checked: true for each value, and I will call select2 with those values.

Nothing clear in the documentation on how to pre-fill select2. How should I do?

Here are my other functions:

function item_or_text(obj) {
    if (typeof(obj.item)!='undefined') {
        return (obj.item.length ? obj.item : obj.text);
    }
    return obj.text;
}

function formatRepo(data) {
    if (data.loading) return data.text;
    var markup = item_or_text(data);
    console.log('formatRepo', data, markup);
    return markup;
}

function formatRepoSelection(item) {
    var retour = item_or_text(item);
    console.log('formatRepoSelection', item, item.item, retour);
    return retour;
}

Did my answer not work for you? Please provide feedback. – Fraser Crosbie Dec 24 '15 at 14:45 — Fraser Crosbie, Dec 24 '15 at 14:45

Fraser Crosbie · Accepted Answer · 2015-12-22T04:32:55.057

I created a working example on jsfiddle using the example code provided on the Select2 Examples page. I just had to change their example select tag to accept multiple like yours:

<select multiple="multiple" ...

I also added a second default selected option:

<option value="3620194" selected="selected">select2/select2</option>
<option value="317757" selected="selected">Modernizr/Modernizr</option>

If you have a look at the fiddle, you will see it working how you would like yours to work.

You did not include the code for your templateSelection: formatRepoSelection method. My guess is that method is the cause of your problem. The code used on the examples page is:

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

Although I have no idea what your formatRepoSelection code is, I think if you change it to something like the following, your issue will be solved:

function formatRepoSelection(repo) {
  return repo.item;
}

I check you answer as valid because your answer works for sure. I woke up 4 hours later, tried my code and everything was working: I really dont know why. Didnt touch a thing! I'm addind options + selected options like you suggest. Maybe working 14hours a day for 10days is a bit too much... Thank you very much for your answer. — Olivier Pons, Dec 25 '15 at 09:13

score 0 · Answer 2 · answered Aug 03 '18 at 08:53

I solve this as follows: Just before execute select2() on select element, get it's initial value:

var initval = selector.attr("value");

After converting it to select2 create an option with initval:

if (initval) {
    var option = new Option(initval, initval, true, true);
    selector.append(option).trigger('change');
}

You can do something similar for multivalue select element.

select2 4.0 AJAX pre-fill howto?

2 Answers2

Linked