我正在通过AJAX提取用户ID和名称，并使用Select2进行搜索，但是我的用户要求能够通过按Tab键从预输入下拉列表中进行选择，从而像按Enter一样有效地进行处理。这是我的select2声明：
$("#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”似乎就是焦点元素，而突出显示的元素将获得“ select2-results__option--higheded”类。
我尝试了一些解决方案，但似乎没有任何效果，尤其是因为此元素在下拉列表打开时会出现或消失。不幸的是，我从尝试中丢失了代码，但是它们主要包括以下操作：当在突出显示的输入上单击Tab时，执行preventDefault，然后在突出显示的元素上触发click事件或在输入上触发enter键。
我也尝试过调整selectOnClose选项，但是总体上看似乎有问题，当我让它正常运行时会导致死循环，更不用说根据所按下的键来覆盖它了。
[编辑]
选定的解决方案有效，但未考虑指定的templateResult，而是显示“（）undefined”。因此，我对其进行了调整，以将突出显示的答案添加为上级选择的选定选项，然后在该选择上立即调用更改事件。
...（与初始select2相同）
}).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("<option value='" + id + "' selected='selected'>" + display + "</option>");
$("#user-select").change();
}
else {
context.val("").change();
}
}
});
我发现Sniffdk接受的答案不再适用于最新的jquery和select2库。它给了我一个Uncaught TypeError: Cannot read property 'id' of undefined。
我想出了以下可行的解决方案（针对单选select2下拉菜单）：
function pickSelect2OptionOnTab() {
let $select;
let optionSelected;
let select2Closing = false;
$('select').on('select2:closing', function(event) {
select2Closing = true;
$select = $(event.target);
optionSelected = $('.select2-results__option--highlighted').text();
setTimeout(function() {
select2Closing = false;
}, 1);
});
$(document).bind('keydown', function(event) {
if (event.key === 'Tab' && select2Closing) {
const val = $select.find('option').filter(function() {
return $(this).text() === optionSelected;
}).first().prop('value');
$select.val(val);
$select.trigger('change');
}
});
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句