Handling dropdown on selectize

Question

I have a selectize control with 100 items.

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

When it gets focus the dropdown should be closed
- openOnFocus: false
When an item is selected the dropdown should be closed
- closeAfterSelect: true
When an item is selected using tab the dropdown should be closed
When an item is deleted with backspace the dropdown should be closed
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();

        }
    });

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
– Ranjith Venkatesh, Commented Jul 6, 2015 at 5:10

uk25 · Accepted Answer · 2016-03-15 09:27:56Z

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

Collectives™ on Stack Overflow

Handling dropdown on selectize

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related