select2 v4 dataAdapter.query not firing

Question

I have an input to which I wish to bind a dataAdapter for a custom query as described in https://select2.org/upgrading/migrating-from-35#removed-the-requirement-of-initselection

<input name="pickup_point">

My script:

Application.prototype.init = function() {
    this.alloc('$pickupLocations',this.$el.find('[name="pickup_point"]'));
    var that = this;
    $.fn.select2.amd.require([
        'select2/data/array',
        'select2/utils'
        ], function (ArrayData, Utils) {
            var CustomData = function($element, options) {
                CustomData.__super__.constructor.call(this, $element, options);
            };Utils.Extend(CustomData, ArrayData);
            CustomData.prototype.query = function (params, callback) {
                var data = {
                    results: []
                }; 
                console.log("xxx");
                for (var i = 1; i < 5; i++) {
                    var s = "";

                    for (var j = 0; j < i; j++) {
                        s = s + params.term;
                    }

                    data.results.push({
                        id: params.term + i,
                        text: s
                    });
                }

                callback(data);
            };

            that.$pickupLocations.select2({
                minimumInputLength: 2,
                language: translations[that.options.lang], 
                tags: [],
                dataAdapter: CustomData

            });

        });

}

But when I type the in the select2 search box the xxx i'm logging for testing doesn't appear in my console.

How can I fix this?

Answer 1

I found the solution on https://github.com/select2/select2/issues/4153#issuecomment-182258515

The problem is that I tried to initialize the select2 on an input field.

By changing the type to a select, everything works fine.

<select name="pickup_point">
</select>