我通过AJAX获取用户ID和名称，并使用Select2搜索它们，但是我的用户已经请求能够通过按Tab键从typeahead下拉列表中进行选择，有效地将其视为按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 - highlight”。
我已经尝试了一些解决方案，但似乎没有任何效果，特别是因为这个元素在下拉列表打开时出现并消失。不幸的是，我从我的尝试中丢失了代码，但它们主要包括在聚焦输入上触发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();
}
}
});
我一直试图找到解决这个问题的方法。 主要问题是select2事件没有提供关于按下哪个键的任何信息。
所以我想出了这个hack来访问select2上下文中的keydown事件。 我一直在尽我所能地测试它，它似乎完美无缺。
selectElement
.select2({ options ... })
.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 id = highlighted.data('data').id;
context.val(id).trigger('change');
}
}
});
// unbind the event again to avoid binding multiple times
setTimeout(function() {
$(document).off('keydown.select2');
}, 1);
});
selectOnClose功能似乎在4.0.3中是稳定的，并且是一个更简单的解决方案：
$("#user-select").select2({
...
selectOnClose: true
});
模板的使用可能会干扰此功能，我没有使用它，所以我没有测试过。
对于任何想要使用多选项进行选项卡选择的人来说，这对我有用：
$("#selected_ids").select2({ multiple: true }).on('select2:open', function(e) { selectOnTab(e) });
function selectOnTab(event){
var $selected_id_field = $(event.target);
$(".select2-search__field").on('keydown', function (e) {
if (e.which === 9) {
var highlighted = $('.select2-results__option--highlighted');
if (highlighted) {
var data = highlighted.data('data');
var vals = $selected_id_field.val();
if (vals === null){
vals = [];
}
vals.push(data.id)
$selected_id_field.val(vals).trigger("change")
}
}
});
}
目前，这限制了我每页一个字段，但它正在完成这项工作。
感谢MikeOShay和Sniffdk深入研究这个问题。 目前有一个未解决的问题可能会解决这个问题：
在使用所有这些解决方案后，这个解决方案似乎能够抓住大多数情况并为我做最好的工作。注意我使用的是select2 4.0.3，但不喜欢selectOnClose，如果你有多个select2盒子，它可能会造成严重破坏！
var fixSelect2MissingTab = function (event) {
var $selected_id_field = $(event.target);
var selectHighlighted = function (e) {
if (e.which === 9) {
var highlighted = $selected_id_field.data('select2').$dropdown.find('.select2-results__option--highlighted');
if (highlighted) {
var data = highlighted.data('data');
if (data) {
var vals = $selected_id_field.val();
if (vals === null) {
vals = [];
}
if (vals.constructor === Array) {
vals.push(data.id);
} else {
vals = data.id;
}
$selected_id_field.val(vals).trigger("change");
}
}
}
};
$('.select2-search__field').on('keydown', selectHighlighted);
}
$(document).on('select2:open', 'select', function (e) { fixSelect2MissingTab(e) });
$(document).on('select2:close', 'select', function (e) {
//unbind to prevent multiple
setTimeout(function () {
$('.select2-search__field').off('keydown');
}, 10);
});
这个解决方案的优点是它是通用的，可以应用于框架代码，即使对于动态添加的select2框也是如此。
您只需更改Select2控件的来源，只需一行：
否则如果（键=== KEYS.ENTER）
否则if（key === KEYS.ENTER || key === KEYS.TAB）
由此：
this.on('keypress', function (evt) {
var key = evt.which;
if (self.isOpen()) {
if (key === KEYS.ESC || key === KEYS.TAB ||
(key === KEYS.UP && evt.altKey)) {
self.close();
evt.preventDefault();
} else if (key === KEYS.ENTER) {
self.trigger('results:select', {});
evt.preventDefault();
对此
this.on('keypress', function (evt) {
var key = evt.which;
if (self.isOpen()) {
if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) {
self.close();
evt.preventDefault();
} else if (key === KEYS.ENTER || key === KEYS.TAB) {
self.trigger('results:select', {});
evt.preventDefault();
可以在源文件src / js / select2 / core.js中或在编译版本中完成更改。当我应用此更改时，我已修改src / js / select2 / core.js并执行gruntfile.js以再次编译select2库。此解决方案不是解决方法，而是select2的一个很好的功能。
我正在使用带有vue的select2版本4.0.6-rc.1，这是我保持绑定安全所做的：
selectElement
.select2({ options ... })
.on("select2:close", function(evt) {
var context = $(evt.target);
$(document).on("keydown.select2", function(e) {
if (e.which === 9) {
var highlighted = context
.data("select2")
.$dropdown.find(".select2-results__option--highlighted");
if (highlighted) {
$.fn.select2.amd.require(["select2/utils"], function(Utils) {
var data = Utils.__cache[highlighted.data().select2Id].data;
var $select2 = context.data('select2');
$select2.trigger("select", {data: data});
});
}
}
});
setTimeout(function() {
$(document).off("keydown.select2");
}, 1);
});
对我来说，关键是Utils帮助器，它是库的一部分，从当前元素的缓存中检索列表，然后使用新值强制选择。
祝好运！ :)
类似于@Semen Shekhovtsov的解决方案，但如果您希望TAB实际上跳转到下一个字段以及进行选择（更像是正常的输入选择），那么会有所改变。如果是块，则将KEYS.ENTER和KEYS.TAB分离到自己的else中，并省略evt.preventDefaults（）。如下所示在core.js或select2.full.js中（如果你不想重新编译它）。
if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) {
self.close();
evt.preventDefault();
} else if (key === KEYS.ENTER){
self.trigger('results:select', {});
evt.preventDefault();
} else if (key === KEYS.TAB){
self.trigger('results:select', {});
// leave out the prevent default if you want it to go to the next form field after selection
//evt.preventDefault();
}
我混合了这里提出的一些解决方案，使用others在元素聚焦时打开select2下拉列表。
我还想要TAB键进行选择并立即聚焦下一个select2字段。相反，SHIFT-TAB将聚焦前一个select2字段。
这是我的最终代码（select2 4.0.5，在FF和Chrome上测试过）。我假设你的选择字段有“select2”类：
$('.select2').select2().on('select2:close', function (e) {
var target = $(e.target);
$(document).on('keydown.select2', function(e) {
if (e.which === 9) { // tab
var highlighted = target
.data('select2')
.$dropdown
.find('.select2-results__option--highlighted');
if (highlighted) {
// select the option
var id = highlighted.data('data').id;
target.val(id);
target.trigger('change');
// focus the next (or the previous) field with "select2" class
var set = $('.select2');
var current_index = set.index(target);
var next_index = current_index + 1;
if (e.shiftKey) {
next_index = current_index - 1;
}
var next = set.eq(next_index)
next.focus();
}
}
});
// unbind the event again to avoid binding multiple times
setTimeout(function() {
$(document).off('keydown.select2');
}, 1);
});
// on focus, open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
});