gpt4 book ai didi

javascript - 处理选择上的下拉菜单

转载 作者:行者123 更新时间:2023-12-01 02:54:09 24 4
gpt4 key购买 nike

我有一个包含 100 个项目的选择控件。

我希望控件仅在键入时显示下拉列表。

  1. 当它获得焦点时,下拉菜单应该关闭
    • openOnFocus:假
  2. 选择某个项目后,下拉列表应关闭
    • closeAfterSelect:true
  3. 使用选项卡选择某个项目时,下拉列表应关闭
  4. 当使用退格键删除项目时,下拉列表应关闭
  5. 当使用 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/

24 4 0