Select 2

====== Select2 ====== ==== FreeText Input ===== Activar

* [[https://gist.github.com/cornernote/e6d1f3ce3f4983a73d89]]


$(".js-example-tags").select2({
    tags: true,
    createTag: function (params) {
        var term = $.trim(params.term);

        if (term === '') {
            return null;
        }
        return {
            id: term,
            text: term + ' (new tag)',  // add text....
            newTag: true // add additional parameters
        }
    }
}).on('change', function(e) {
    $(this).next('.select2-container').find('li:contains(" (new tag)")').text(function(idx, txt) {
        return txt.replace(' (new tag)', '');
    })
});

* [[https://stackoverflow.com/questions/52228965/select2-differentiating-free-text-responses-tags-true]] ====== Crea tag Select2 ======


function GrillaBusquedaRemitente(state){
	if (!state.id) {
		return state.text;
	}
	if( state.id == -1 ){
		var $state = $(
			""+
				"Empresa: "+state.text+""+
				""+
				"No existe, Crear nuevo Remitente."+
			""
		);
	}else{
		var $state = $(
			""+
				"Empresa: "+state.text+""+
				""+
				""+
					"Contacto: "+state.contacto+""+
				""+
				"Dirección: "+state.direccion+""+
				"Ubigeo: "+state.desdep+" / "+state.despro+" / "+state.desdis+""+
			""
		);
	}
	return $state;
}


	$("#Remite_Remitente_SEL").select2({
	
		multiple: false,
        tags: true,
        createTag: function (tag) {
			$("#Remite_Remitente_SEL").empty();
            return {id: -1, text: tag.term, tag: true};
        },
	
		minimumInputLength: 3,
		templateResult:GrillaBusquedaRemitente,
		ajax: { 
			placeholder: "Select",
			url:'swsql.asp',
			type: "get",
			dataType: 'json',
			delay: 250,
			data: function (params) {
				ultimaConsulta = params.term;
				//localidad = $("#idOcultoLocalidad").val(); //this is the anotherParm
				return {
					'opt':'DESTINA',
					'wcliente':window.wCliente,
					'Busca':params.term // search term
				};
			},
			processResults: function (response) {
				console.log( response );
				para = Array();
				for( var i in response ){
					para.push({ id:response[i].STL_IDDESCLI,
							    text:response[i].STL_EMPRESA,
								contactotelef:response[i].STL_CONTACTO_TELEFONO,
								contactoemail:response[i].STL_CONTACTO_EMAIL,
								contacto:response[i].STL_CONTACTO_NOMBRE,
								rucdni:response[i].STL_RUC_DNI,
								direccion:response[i].STL_DIRECCION,
								referencia:response[i].STL_REFERENCIA,
								idubigeo:response[i].STL_IDUBIGEO,
								desdep:response[i].STL_DESDEP,
								despro:response[i].STL_DESPRO,
								desdis:response[i].STL_DESDIS
							})
				}
				return{
					results:para
				}
			}
		}
		
	}).maximizeSelect2Height();
	
	$("#Remite_Remitente_SEL").on('select2:select', function (e) {
		var data = e.params.data;
		$("#Remite_direccion").val(data.direccion);
		$("#Remite_contacto").val(data.contacto);
		$("#Remite_telefono").val(data.contactotelef);
		/*
		$("#Remite_Ubigeo").empty().select2({
			data: [{id: data.idubigeo, text: data.idubigeo+" : "+
												data.desdep+" / "+
												data.despro+" / "+
												data.desdis}]
		});
		*/
		$("#Remite_Ubigeo").append( new Option( data.idubigeo+" : "+
													data.desdep+" / "+
													data.despro+" / "+
													data.desdis
													,data.idubigeo
													,true
													,true
												)
									);
									
		if( $(this).val() == -1 ){
			$("#Remite_Ubigeo").append( new Option( "Seleccionar Ubigeo Remite",
													 "0",
													 true,
													 true
													)
										);
		}
	});

Resolver el problema de al agregar otra opcion que aumente en el select2 * [[https://select2.org/programmatic-control/add-select-clear-items]] ===== CheckBox Select ===== * [[https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option]] ===== Select2 Formato de resultado ====== * [[https://stackoverflow.com/questions/53757838/select2-draw-image-and-text-on-selected-option]] ===== parent ===== cuando el select2 no funciona en un modal o un dialog,



dropdownParent: $("#myModal")

* [[https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal]] ===== Problemas cuando el parent no tiene posicion absoluta Scroll ===== y la posicion cambia, como por ejemplo dentro de un jquery accordion * [[https://github.com/select2/select2/issues/3303]] * [[https://github.com/select2/select2/issues/4969]] * [[https://github.com/select2/select2/issues/4614]] * [[https://github.com/select2/select2/issues/3905]]


     $('#states').select2({
         dropdownParent: $('#parent')
      });
      $('#states').on('select2:open', function (e) {
        const evt = "scroll.select2";
        $(e.target).parents().off(evt);
        $(window).off(evt);
      });

* [[https://stackoverflow.com/questions/55440004/js-select2-plugin-not-scrolling-when-options-are-open]] ====== Sin buscador ======



$('select').select2({
    minimumResultsForSearch: -1
});

* [[https://stackoverflow.com/questions/17480040/select2-hiding-the-search-box]]



var opt = document.createElement('option');
 opt.value = 'hello';
 opt.text = 'world';
 opt.setAttribute('data-discount', 'integer');
 selbox.options.add(opt);

===== Template ==== * templateResult * templateSelection Para cambiar la apariencia del select, en este caso aumentar el tamaño del height:



span.select2-selection{
    height:60px!important;
}
span.select2-selection__arrow{
    height:60px!important;
}

=== templateResult ===

=== templateSelection ===