選擇處理下拉列表

Question

我有100個選項的選擇控制。

我希望控件僅在鍵入時才顯示下拉列表。

1. 當它獲得焦點的下拉應該關閉
   • openOnFocus：假
2. 當選擇一個項目的下拉應該關閉
   • closeAfterSelect：真
3. 當一個項目被選中d。使用標籤的下拉應該關閉
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(); 
 
    }); 
 
});