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

        }
    });

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

        }
    });

• javascript
• jquery
• selectize.js

• Item 3 got solved when I updated the version of selectize from 0.9 to 0.12. However points 4 and 5 are still open. – Ranjith Venkatesh Commented Jul 6, 2015 at 5:10

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