Select2 4.0 clicking item doesn't fire select2:select

Question

I'm using select2 4.0 and when I load data from a json file none of the created elements fire the select2:select event. I thought it would have something to do with event delegation, but the examples on the website seem to do just fine.

I've been breaking my head over this for the past hour and I just don't understand what I'm missing.

Right now I'm using this to select an item, but that obviously doesn't work:

$("body").on("click", "#select2-select-results .person-entry", function()
{
    var $this = $(this);
    var name = $this.data('name');

    select2.find('option').val(name).text(name);
});

Binding $(...).on('select2:select'); never fires, but $(...).on('select2:open); does. So I'm not sure what's going on.

What I did notice however, is when the data has been loaded, no <option> tags are created.

This is my entire JavaScript that's handling the thing:

(function($)
{
    "use strict";
    var term = null;
    var select2 = $("#select");

    select2.select2({
        allowClear: true,
        ajax: {
            url: "js/data.json",
            dataType: "json",
            delay: 250,
            data: function(params)
            {
                // Save the terms for filtering
                term = params.term;

                return params;
            },
            processResults: function(data)
            {
                var people = [];

                for(var i = 0; i < data.people.length; i++)
                {
                    var person = data.people[i];
                    var filter = term || '';

                    if (person.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
                        people.push(person);
                    }
                }

                return {
                    results: people
                };
            }
        },
        templateResult: function(person)
        {
            if (person.loading) {
                return person.text;
            }

            var personDetails = '<div class="person-information">' +
                '<span class="person-name">' + person.name + '</span>' +
                '<span class="person-address">' + person.address + '</span>' +
                '</div>';

            return '<div class="person-entry" data-name="' + person.name + '"><img src="' + person.image + '" />' + personDetails + '</div>';
        },
        templateSelection: function(person)
        {
            return person.name;
        },
        escapeMarkup: function(markup)
        {
            return markup
        }
    });

    $("body").on("click", "#select2-select-results .person-entry", function()
    {
        var $this = $(this);
        var name = $this.data('name');

        select2.find('option').val(name).text(name);
    });
})(jQuery);

Can someone tell me what I'm doing wrong here? I just don't get it.

Answer 1

It sounds like you are not setting the id field on your data objects. Without this field, Select2 cannot know what to set the value of your <select> to, so it doesn't allow it to be selected.

Additionally, the text field is required for searching and (by default) displaying the data in the results list.