Personalizar Select2 Multi Select

Estoy creando un campo de selección múltiple utilizando select2 de la siguiente manera.

Quiero hacerlo para que el marcador de posición (“Buscar elementos”) se vea siempre en el campo, incluso después de que ya haya seleccionado elementos. Intenté esto para colocar un nuevo marcador de posición después de seleccionar cualquier opción en el menú desplegable:

$(".select2-results__option").click(function() { console.log("x"); $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items"); }); 

Pero desafortunadamente ni siquiera activa el registro de la consola.

Mi otra pregunta es, ¿puedo hacer que la (“x”) de las pastillas se coloque a la derecha de los textos en lugar de a la izquierda?

 $(document).ready(function() { $(".js-example-basic-multiple").select2({ placeholder: "Select items" }); }); $(".select2-results__option").click(function() { console.log("x"); $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items"); }); 
 .select2-selection { height: 34px !important; font-size: 13px; font-family: 'Open Sans', sans-serif; border-radius: 0 !important; border: solid 1px #c4c4c4 !important; padding-left: 4px; } .select2-selection--multiple { height: 154px !important; width: 366px !important; } .select2-selection__choice { height: 40px; line-height: 40px; padding-right: 16px !important; padding-left: 16px !important; background-color: #CAF1FF !important; color: #333 !important; border: none !important; border-radius: 3px !important; } .select2-search--inline .select2-search__field { line-height: 40px; color: #333; } .select2-container:hover, .select2-container:focus, .select2-container:active, .select2-selection:hover, .select2-selection:focus, .select2-selection:active { outline-color: transparent; outline-style: none; } .select2-results__options li { display: block; } .select2-selection__rendered { transform: translateY(2px); } .select2-selection__arrow { display: none; } .select2-results__option--highlighted { background-color: #CAF1FF !important; color: #333 !important; } .select2-dropdown { border-radius: 0 !important; box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important; border: none !important; margin-top: 4px !important; width: 366px !important; } .select2-results__option { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 24px !important; vertical-align: middle !important; padding-left: 8px !important; } .select2-results__option[aria-selected="true"] { background-color: #eee !important; } .select2-search__field { font-family: 'Open Sans', sans-serif; color: #333; font-size: 13px; padding-left: 8px !important; border-color: #c4c4c4 !important; } .select2-selection__placeholder { color: #c4c4c4 !important; } 
 
Item A1 Item A2 Item B1 Item C1 Item C2 Item C3

Para mostrar el marcador de posición en la selección:

La biblioteca cambia el tamaño del elemento de input (el que tiene el marcador de posición) en la selección. Así que tenemos que anularlo. ¿Cómo? Aquí hay un enfoque:

 if($(this).val() && $(this).val().length) { $(this).next('.select2-container') .find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items'); } 

En la selección de valores, obtiene el elemento de entrada del contenedor select2 y agrega explícitamente un marcador de posición .

Para tener el icono de eliminar a la derecha:

De todos modos, tienes un montón de CSS primordial, simplemente agregando algunas líneas más a la misma. 🙂

 .select2-selection__choice__remove { float: right; margin-right: 0; margin-left: 2px; } 

Aquí está el fragmento de código:

 $(document).ready(function() { $(".js-example-basic-multiple").select2({ placeholder: "Select items" }).on('change', function(e) { if($(this).val() && $(this).val().length) { $(this).next('.select2-container') .find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items'); } }); }); 
 .select2-selection { height: 34px !important; font-size: 13px; font-family: 'Open Sans', sans-serif; border-radius: 0 !important; border: solid 1px #c4c4c4 !important; padding-left: 4px; } .select2-selection--multiple { height: 154px !important; width: 366px !important; } .select2-selection__choice { height: 40px; line-height: 40px; padding-right: 16px !important; padding-left: 16px !important; background-color: #CAF1FF !important; color: #333 !important; border: none !important; border-radius: 3px !important; } .select2-selection__choice__remove { float: right; margin-right: 0; margin-left: 2px; } .select2-search--inline .select2-search__field { line-height: 40px; color: #333; width: 100%!important; } .select2-container:hover, .select2-container:focus, .select2-container:active, .select2-selection:hover, .select2-selection:focus, .select2-selection:active { outline-color: transparent; outline-style: none; } .select2-results__options li { display: block; } .select2-selection__rendered { transform: translateY(2px); } .select2-selection__arrow { display: none; } .select2-results__option--highlighted { background-color: #CAF1FF !important; color: #333 !important; } .select2-dropdown { border-radius: 0 !important; box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important; border: none !important; margin-top: 4px !important; width: 366px !important; } .select2-results__option { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 24px !important; vertical-align: middle !important; padding-left: 8px !important; } .select2-results__option[aria-selected="true"] { background-color: #eee !important; } .select2-search__field { font-family: 'Open Sans', sans-serif; color: #333; font-size: 13px; padding-left: 8px !important; border-color: #c4c4c4 !important; } .select2-selection__placeholder { color: #c4c4c4 !important; }