處理選擇性下拉列表

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