如何使select2占位符用于搜索输入

Question

如何为select2 jQuery插件制作占位符。在StackOverflow上，许多人回答了如何在那里制作占位符，但是关于元素的占位符。我需要为搜索框指定占位符，请参阅图片

Answer 1

我有同样的需求，最后我为Select2插件编写了一个小扩展名。

插件searchInputPlaceholder有一个新选项，用于为“搜索”输入字段设置占位符。

在插件的js文件后面添加以下代码：

(function($) {

    var Defaults = $.fn.select2.amd.require('select2/defaults');

    $.extend(Defaults.defaults, {
        searchInputPlaceholder: ''
    });

    var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search');

    var _renderSearchDropdown = SearchDropdown.prototype.render;

    SearchDropdown.prototype.render = function(decorated) {

        // invoke parent method
        var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments));

        this.$search.attr('placeholder', this.options.get('searchInputPlaceholder'));

        return $rendered;
    };

})(window.jQuery);

<强>用法：

使用searchInputPlaceholder选项初始化select2插件：

$("select").select2({
    // options 
    searchInputPlaceholder: 'My custom placeholder...'
});

<强>演示：

JsFiddle上的演示。

Github回购：

https://github.com/andreivictor/select2-searchInputPlaceholder

Answer 2

您可以使用该活动：

  

select2:opening：在下拉列表打开前触发。可以阻止此事件

在此事件中添加占位符属性就足够了：

$(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder')

$('select').select2({
    placeholder: 'Select an option'
}).on('select2:opening', function(e) {
    $(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select style="width: 100%;">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Answer 3

使用事件select2:open。

$('#mySelect').select2().on('select2:open', function(e){
    $('.select2-search__field').attr('placeholder', 'your placeholder');
})

Answer 4

您必须添加课程

disabled selected hidden

到select

的第一个选项元素