Handling dropdown on selectize

问题:

I have a selectize control with 100 items.

I want the control to show the dropdown only when typing.

1. When it gets focus the dropdown should be closed
   • openOnFocus: false
2. When an item is selected the dropdown should be closed
   • closeAfterSelect: true
3. When an item is selected using tab the dropdown should be closed
4. When an item is deleted with backspace the dropdown should be closed
5. When an item is deleted with x(remove plugin) the dropdown should be closed

How do I achieve 3, 4 and 5?

My control settings look like below:

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

        }
    });

回答1:

Maybe this can help you. It works fo me fine.

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