Bagaimana untuk menambah ruang letak untuk select2 untuk mencari input

Question

Cara membuat ruang letak untuk pemalam select2 jQuery. Terdapat banyak jawapan tentang StackOverflow cara membuat ruang letak di sana, tetapi ia adalah mengenai ruang letak untuk elemen. Saya perlu menentukan ruang letak untuk kotak carian, lihat gambar.

Answer 1

Anda boleh menggunakan acara ini:

Ia cukup untuk menambah atribut pemegang tempat pada acara ini:

$(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 2

Saya mempunyai keperluan yang sama dan akhirnya menulis sambungan kecil untuk pemalam Select2.

Pemalam mempunyai pilihan baharusearchInputPlaceholder untuk menetapkan pemegang tempat bagi medan input Carian.

Tambah kod berikut selepas fail js pemalam:

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

Penggunaan:

Mulakan pemalam select2 menggunakan pilihan searchInputPlaceholder:

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

Demo:

Demo boleh didapati di JsFiddle.

---

Dikemas kini 9 Mei 2020

Diuji dengan versi Select2 terkini (v4.0.13) - JsFiddle.

---

Repositori Github:

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