How to slideToggle Selectize.js dropdown?

Question

I'm using the awesome Selectize.js plugin, and I'm trying to add a simple slide animation when the dropdown is opened using jQuery. And I also change the position to static.

http://jsfiddle.net/TAuEH/1/

I changed a this:

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.css({visibility: 'hidden', display: 'block'});
  self.positionDropdown();
  self.$dropdown.css({visibility: 'visible'});
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.hide();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

By this:

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.slideDown();
  self.positionDropdown();
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.slideUp();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

Well, as you see, I'm afraid it does not open properly, and does not do the slideup animation when you close it... anyone has better idea to do it?

Any advice, tip or help will be appreciated, and if you need more info i'll edit the post.

Answer 1

Without any change on the plugin code, you can try using the events onDropdownOpen and onDropdownClose and force an animation.

It's a bit hacky, but it works.

Code:

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function () {
            $(".selectize-dropdown").hide().slideToggle();
        },
        onDropdownClose: function () {
            $(".selectize-dropdown").show().slideToggle();
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/cHxcZ/

EDIT

In the previous version there is an issue when you try to close it pressing the input again, solved using stop.

Ref:

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.

Code:

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function ($dropdown) {
            $dropdown.stop().hide().slideToggle();
        },
        onDropdownClose: function ($dropdown) {
            $dropdown.stop().show().slideToggle();
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/cHxcZ/1/