selectize clickable link in item 1

selectize clickable link in item

// Selectize plugin to click links w/out closing dropdown.
// Add 'clickable' class to links in your dropdown template.
Selectize.define('option_click', function(options) {
    var self = this;
    var setup = self.setup;
    this.setup = function() {
        setup.apply(self, arguments);

        var clicking = false;

        // Detect click on a .clickable
        self.$dropdown_content.on('mousedown click', function(e) {
            if ($(e.target).hasClass('clickable')) {
                if (e.type === 'mousedown') {
                    clicking = true;
                    self.isFocused = false; // awful hack to defuse the document mousedown listener
                } else {
                    self.isFocused = true;
                    setTimeout(function() {
                        clicking = false; // wait until blur has been preempted
                    });
                }
            } else { // cleanup in case user right-clicked or dragged off the element
                clicking = false;
                self.isFocused = true;
            }
        });

        // Intercept default handlers
        self.$dropdown.off('mousedown click', '[data-selectable]').on('mousedown click', '[data-selectable]', function() {
            if (!clicking) {
                return self.onOptionSelect.apply(self, arguments);
            }
        });
        self.$control_input.off('blur').on('blur', function() {
            if (!clicking) {
                return self.onBlur.apply(self, arguments);
            }
        });
    }
});

Here is what the above code is Doing:
1. It’s defining a new plugin called ‘option_click’
2. It’s overriding the default setup function to add a new event listener to the dropdown content
3. It’s overriding the default onOptionSelect and onBlur functions to prevent them from firing when the user clicks on a link
4. It’s overriding the default mousedown and click event listeners on the dropdown and control input to call the default onOptionSelect and onBlur functions when the user clicks on a link

Similar Posts