占位符作为选项答案

【问题标题】：Placeholder as an option占位符作为选项
【发布时间】：2014-07-31 01:26:43
【问题描述】：

当您使用 selectize 创建下拉菜单时，一旦您选择了一个选项，选择占位符的唯一方法是单击输入字段然后按退格键，这不直观。我们可以将占位符作为类似于原生选择元素中的选项吗？

这个github issue中引用了类似的问题

【问题讨论】：

如果人们在对问题投反对票时进行解释，将会很有帮助。

【解决方案1】：

我已经为这个问题编写了一个选择插件，它附加了占位符元素，点击后会清除选择。

Selectize.define('selectable_placeholder', function( options ) {
    var self = this;

    options = $.extend({
        placeholder: self.settings.placeholder,
        html: function ( data ) {
            return (
                '<div class="selectize-dropdown-content placeholder-container">' +
                    '<div data-selectable class="option">' + data.placeholder + '</div>' +
                '</div>'
            );
        }
    }, options );

    // override the setup method to add an extra "click" handler
    self.setup = (function() {
        var original = self.setup;
        return function() {
            original.apply(this, arguments);
            self.$placeholder_container = $( options.html( options ) );
            self.$dropdown.prepend( self.$placeholder_container );
            self.$dropdown.on( 'click', '.placeholder-container', function () {
                self.setValue( '' );
                self.close();
                self.blur();
            });
        };
    })();

});

这里是gist

Working Fiddle

希望这对可能遇到此问题的人有所帮助。

【讨论】：