处理选择性下拉列表

Question

我有100个项目的选择控制。

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

1. 当它获得焦点时，应该关闭下拉列表
   • openOnFocus：false
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();

        }
    });

Answer 1

也许这可以帮到你。 它对我很好。

 $('#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(); }); });