Comment ajouter un espace réservé pour select2 pour rechercher l'entrée

Question

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.

Answer 1

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>

Answer 2

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