Comment ajouter un espace réservé pour select2 pour rechercher l'entrée
P粉521697419
P粉521697419 2023-10-22 22:01:07
0
2
677

Comment créer des espaces réservés pour le plugin jQuery select2. Il existe de nombreuses réponses sur StackOverflow sur la façon de créer des espaces réservés, mais elles concernent les espaces réservés pour les éléments. Je dois spécifier un espace réservé pour le champ de recherche, voir image.

P粉521697419
P粉521697419

répondre à tous(2)
P粉939473759

Vous pouvez utiliser cet événement :

Il suffit d'ajouter l'attribut placeholder à cet événement :

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

J'ai eu le même besoin et j'ai fini par écrire une petite extension pour le plugin Select2.

Le plugin a une nouvelle optionsearchInputPlaceholder pour définir un espace réservé pour le champ de saisie de recherche.

Ajoutez le code suivant après le fichier js du plugin :

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

Utilisation :

Initialisez le plugin select2 en utilisant l'option searchInputPlaceholder :

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

Démo :

La démo peut être trouvée sur JsFiddle.


Mis à jour le 9 mai 2020

Testé avec la dernière version de Select2 (v4.0.13) - JsFiddle.


Dépôt Github :

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal