我有一个包含 100 个项目的选择控件。
我希望控件仅在键入时显示下拉列表。
- 当它获得焦点时,下拉菜单应该关闭
- openOnFocus:假
- 选择某个项目后,下拉列表应关闭
- closeAfterSelect:true
- 使用选项卡选择某个项目时,下拉列表应关闭
- 当使用退格键删除项目时,下拉列表应关闭
- 当使用 x(删除插件)删除项目时,下拉列表应关闭
如何实现 3、4 和 5?
我的控制设置如下所示:
globalSelectizedEditor = $('#tagsEditor').selectize({
plugins: ['remove_button'],
valueField: 'Id',
labelField: 'Name',
searchField: 'Name',
options: [],
create: true,
openOnFocus: false,
persist: false,
closeAfterSelect: true,
render: {
...
},
load: function (query, callback) {
...
},
onItemAdd: function(value) {
...
globalSelectizedEditor[0].selectize.close();
},
onItemRemove: function () {
globalSelectizedEditor[0].selectize.close();
}
});
最佳答案
也许这可以帮助你。对我来说效果很好。
$('#tagsEditor').each(function() {
var selectize = $(this).selectize({
plugins: ['remove_button'],
openOnFocus: false
})[0].selectize;
//Close dropdown on clicking on control in focus
selectize.$control.on('mousedown', function() {
selectize.close();
});
//Close dropdown on clicking on plugin X
selectize.$control.on('click', function() {
selectize.close();
});
//Close dropdown on deleting query by pressing BACKSPACE if less than 2 symbols left
selectize.$control_input.on('keydown', function(e) {
if (e.keyCode == 8 && selectize.$control_input.val().length < 2) {
selectize.close();
}
});
//Close dropdown on typing query less than 2 symbols
selectize.on('type', function(e) {
if (selectize.$control_input.val().length < 2) {
selectize.close();
}
});
//Close dropdown on adding item
selectize.on('item_add', function() {
selectize.close();
});
//Close dropdown on removing item
selectize.on('item_remove', function() {
selectize.close();
});
});
关于javascript - 处理选择上的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31186103/