jp+ajax生成select,Select2 4.0.0 AJAX - 通过标签

选择突出显示的选项我通过AJAX获取用户ID和名称，并使用Select2搜索它们，但我的用户已请求通过按Tab键从下拉菜单中进行选择的功能按Enter键处理它。这是我的选择2声明：Select2 4.0.0 AJAX - 通过标签

$("#user-select").select2({

ajax: {

url: "/api/User",

method: "get",

data: function (params) {

return {

search: params.term

};

},

beforeSend: function() {

$(".loading-results").text("Loading...");

},

processResults: function (data) {

return {

results: data

};

},

cache: true

},

allowClear: true,

placeholder: "Enter a User ID or Name",

templateResult: function (data) {

return "(" + data.id + ") " + data.name;

},

templateSelection: function (data) {

return "(" + data.id + ") " + data.name;

}

“.select2-search__field”似乎是每当下拉的可见的，突出显示的元素获取类聚焦元素‘选择2 - results__option - 突出’。

我试过一些解决方案，但似乎没有任何工作，特别是因为这个元素出现并随时打开下拉菜单消失。不幸的是，我从我的尝试中丢失了代码，但是他们主要是通过在焦点输入上点击Tab时执行preventDefault，然后在突出显示的元素上触发单击事件或触发输入上的Enter键。

我也尝试调整selectOnClose选项，但似乎越野车在一般情况下，导致无尽的循环，当我有它正常运行，更少尝试覆盖它基于什么键被按下。

[编辑]

所选解决方案的工作，但不考虑指定的templateResult，而不是显示 “()未定义”。所以，我调整它作为覆盖选择的选定选项添加突出显示的答案，然后在该选择上直接调用更改事件。

...(同初始选择2)

}).on('select2:close', function (evt) {

var context = $(evt.target);

$(document).on('keydown.select2', function (e) {

if (e.which === 9) { // tab

var highlighted = context.data('select2').$dropdown.find('.select2-results__option--highlighted');

if (highlighted) {

var data = highlighted.data('data');

var id = data.id;

var display = data.name;

$("#user-select").html("" + display + "");

$("#user-select").change();

}

else {

context.val("").change();

}

}

});

+0

你有想过吗？遇到相同的问题。 –

+0

没有骰子，在我发布之前，我已经用尽了大部分的故障排除功能。如果你知道我应该在此标记以帮助人们找到可以回答的人，请告诉我，我会将其编辑到帖子中。 –

+1

非常感谢 - 我花了一些时间敲打它，也没有运气。我会让你知道如果我想出任何东西:) –