I am using the Selectize.js. From the docs it says I can set up a 'onDropdownClose' callback here: Selectize docs. I can't seem to get it to work.

How do I blur (defocus) the input after a selection has been made using Selectize.js? All the blurs in the below code do not work.

$(document).ready(function() {
    $("#myinput").selectize({
    onDropdownClose : function ($dropdown) {
                       $($dropdown).prev().find('input').blur();
                      }
    });
});

EDIT: I am using Bootstrap 3.1.1. I just noticed that the default behavior for Bootstrap 2 is to blur the input after a selection has been made while Bootstrap 3+ leaves the input in focus after a selection has been made. My question still stands for Bootstrap 3+

Edit: I got it to work with the above code.

I am using the Selectize.js. From the docs it says I can set up a 'onDropdownClose' callback here: Selectize docs. I can't seem to get it to work.

How do I blur (defocus) the input after a selection has been made using Selectize.js? All the blurs in the below code do not work.

$(document).ready(function() {
    $("#myinput").selectize({
    onDropdownClose : function ($dropdown) {
                       $($dropdown).prev().find('input').blur();
                      }
    });
});

EDIT: I am using Bootstrap 3.1.1. I just noticed that the default behavior for Bootstrap 2 is to blur the input after a selection has been made while Bootstrap 3+ leaves the input in focus after a selection has been made. My question still stands for Bootstrap 3+

Edit: I got it to work with the above code.

• javascript
• jquery
• html
• plugins

• Were you unable to just do: $dropdown.blur(); – Esteban Commented Nov 17, 2015 at 21:57

5 Answers 5

Adding this just to have an actual answer. Your solution works.

$("#myinput").selectize({
  onDropdownClose: function(dropdown) {
    $(dropdown).prev().find('input').blur();
  });
});

I had a similar issue and solved it using:

$('#myinput').selectize({
    onItemAdd: function () {
        this.blur();
    }
}

Also, you can access input field like this:

$("#myinput").selectize({
    onDropdownClose: function(dropdown) {
        this.$control_input.blur();
    }
});

closeAfterSelect option has been added since 0.12.0.

https://github./brianreavis/selectize.js/blob/v0.12.0/docs/usage.md#options

Accepted (deadwards) answer was fine, but in situation like this: you open the menu, and close it by clicking back on the input element. In this situation, the dropdownmenu gets opened again. I used this variant. I know, it is an ugly solution, but it worked better in this situation. You could change timout delay to fit your situation bettter, this was fine for me.

        onDropdownClose: function (dropdown) {
            var self = this;
            setTimeout(function() {
                self.$control_input.blur();
            }, 250);
        }