如何為搜索輸入制作 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 上提供演示。

---

2020 年 5 月 9 日更新

使用最新的 Select2 版本 ( v4.0.13 ) - JsFiddle 進行測試。

---

Github 倉庫：

https://github.com/andrevictor/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

選擇的第一個選項元素