Link 在下拉列表中 Selectize.js

Question

我正在尝试将 link 放在 selectize 下拉列表中，以允许用户进行 select 以外的操作，同时仍然允许用户select将项目作为主要选项。

这是我想要实现的示例（但未按预期工作）：

我所做的就是在 HTML 上插入 links。但它不起作用，我想对于某种事件传播停止，是否可以使用 selectize?

来实现

还没有人回答，我认为还有更多要说的，所以，这是我所做的一个例子：

render: {
    option: function(item) {
        return '<div><span>'+item.label+'</span>'
            + '<div class="pull-right">'
            + '<a href="#link">Link</a>'
            + '</div></div>';
    }
}

如您所见，我确实更改了 "option" 渲染，并在普通 HTML 中插入了一个 link。问题是 - 如图所示 - 当我单击 link 时，浏览器不遵循 link，而是执行 selectize 的默认操作，即 select点击元素。

我想要实现的是点击时让它跟随link。

这是我所做的fiddle：http://jsfiddle.net/uetpjpa9

Answer 1

根本问题是 Selectize 具有 mousedown 和 blur 处理程序，这些处理程序在 mouseup 事件之前关闭下拉列表，该事件将完成您的 link 正在等待的点击。在没有 Selectize 直接支持的情况下避免这种情况并不容易，但由于它的插件系统和它为您提供的 Selectize 内部访问量，这是可能的。

这是一个plugin that allows a dropdown element with the class clickable to be clicked on. (demo)

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

要使用它，您需要将插件选项传递给 selectize 调用 (.selectize({plugins:['option_click']})) 并在下拉列表中添加 clickable class 到 links模板。（这是相当具体的。如果有嵌套元素，请确保 clickable 在第一个看到 mousedown 事件的元素上。）

请注意，这是一种相当骇人听闻的方法，可能存在边缘情况，并且如果有关 Selectize 调度事件的方式发生变化，则可能随时中断。如果 Selectize 本身将此例外会更好，但在项目赶上其积压并变得更容易接受请求和 PR 之前，这可能是最实用的方法。

Link 在下拉列表中 Selectize.js

Link on dropdown Selectize.js

javascript

jquery

selectize.js