web-dev-qa-db-fra.com

Comment créer un espace réservé select2 pour la recherche

Comment créer un espace réservé pour le plugin select2 jQuery. Sur StackOverflow, de nombreuses réponses expliquent comment créer un espace réservé, mais elles concernent l'espace réservé de l'élément. Je dois spécifier un espace réservé pour la zone de recherche, voir photo . enter image description here

javascriptjqueryjquery-select2
10
Lukas Pierce

J'avais le même besoin et j'avais fini par écrire une petite extension pour le Select2 brancher.

Il existe une nouvelle option pour le plugin, searchInputPlaceholder, afin de définir un espace réservé pour le champ de saisie 'recherche'.

Ajoutez le code suivant juste 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 avec l'option searchInputPlaceholder:

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

Démo:

Démo disponible sur JsFiddle .

Repo Github:

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

20
andreivictor

Vous pouvez utiliser l'événement:

select2: ouverture : déclenché avant l'ouverture de la liste déroulante. Cet événement peut être évité

Il suffit d'ajouter l'attribut d'espace réservé dans 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>
6
gaetanoM

Utilisez l'événement select2: open .

$('#mySelect').select2().on('select2:open', function(e){
    $('.select2-search__field').attr('placeholder', 'your placeholder');
})
3
Hoyoon Lee