Cómo hacer un marcador de posición select2 para la entrada de búsqueda

Necesitamos tu ayuda para compartir nuestras secciones referente a las ciencias informáticas.

Solución:

Tuve la misma necesidad y terminé escribiendo una pequeña extensión para el Select2 enchufar.

Hay una nueva opción para el plugin, searchInputPlaceholderpara establecer un marcador de posición para el campo de entrada ‘buscar’.

Agregue el siguiente código justo después del archivo js del complemento:

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

Uso:

Inicialice el complemento select2 con el searchInputPlaceholder opción:

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

Manifestación:

Demostración disponible en JsFiddle.

---

ACTUALIZACIÓN 9 de mayo de 2020

Probado con la última versión de Select2 (v4.0.13) – JsFiddle.

---

repositorio de Github:

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

Puedes usar el evento:

select2:opening: Activado antes de que se abra el menú desplegable. Este evento se puede prevenir

Es suficiente agregar el marcador de posición attribute en este evento:

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

    Volvo
    Saab
    Mercedes
    Audi

Utilice evento select2: abierto.

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

Si para ti ha resultado de utilidad este post, sería de mucha ayuda si lo compartes con más juniors y nos ayudes a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador