Select2 : In a remote select2 control unable to select the highlighted option with tab key press

1
votes

I have setup select2 exactly as the example mentioned in this link Load ajax data into select2.

In that example control i can type some text press the arrow keys and when i hit tab it selects the item i was highlighted on.

But in my case when i hit tab nothing happens, i have to hit ENTER key to have it selected. Or click the mouse which is bad when my users are filling out forms.

How to make it so that it does the selection on hitting TAB key as well?

Code - 

<input id="taskRelationShip" name="RelatedToId" type="hidden" value="" />

$('#taskRelationShip').css('width', '400px').select2({
        minimumInputLength: 2,
        ajax: {
            quietMillis: 10,
            url: '/Tasks/TaskRelatedToItemsSearch',
            dataType: 'json',
            data: function(term, page) {
                return {
                    query: term
                };
            },
            results: function (data, page) {
                return { results: data };
            }
        },
        initSelection: function (element, callback) {
            var id = $(element).val();
            if (id !== "") {
                $.ajax("/Tasks/LoadRelatedItem/" + id).done(function(data) {
                    callback(data);
                });
            }
        },
        formatResult: function (item) {
            var img = item.id.substring(0, 3) === 'OPP' ? 'opportunity' : 'project';
            var format = '<i class="icon-{0} avatar link-icon"></i> ';
            img = ins.utils.formatString(format, img);
            return '<div>' + img + item.value + '</div>';
        },
        formatSelection: function (item) {
            return item.value;
        },
        dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
        escapeMarkup: function (m) { return m; }
    });
1
javascriptjqueryajaxselect

1 Answers

0
votes

You need to add selectOnBlur: true, I believe.