Bagaimana untuk menambah ruang letak untuk select2 untuk mencari input
P粉521697419
P粉521697419 2023-10-22 22:01:07
0
2
737

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.

P粉521697419
P粉521697419

membalas semua(2)
P粉939473759

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>
P粉311089279

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan