Select2

FreeText Input

Activar

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <title>Select 2</title>
</head>
<body>
 
<form>
    <select id="e1">
        <option value="1">Awsome</option>
        <option value="2">Cool</option>
        <option value="3">Balls</option>
    </select>
</form>
 
<script>
    $('#e1').select2({
        multiple: false,
        tags: true,
        createTag: function (tag) {
            return {id: tag.term, text: tag.term, tag: true};
        }
    });
</script>
 
</body>
</html>

https://gist.github.com/cornernote/e6d1f3ce3f4983a73d89

<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.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 
 
<select class="form-control js-example-tags" multiple>
    <option selected="selected">orange</option>
    <option>white</option>
    <option>purple</option>
</select>

$(".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 = $(
			"<div style='border-bottom:1px solid silver;'>"+
				"<div style='font-size:13px;'>Empresa: <b>"+state.text+"</b>"+
				"</div>"+
				"<div><b>No existe, Crear nuevo Remitente.</b></div>"+
			"</div>"
		);
	}else{
		var $state = $(
			"<div style='border-bottom:1px solid silver;'>"+
				"<div style='font-size:13px;'>Empresa: <b>"+state.text+"</b>"+
				"</div>"+
				"<div style='display:flex;'>"+
					"<div class='pr-2' style='font-size:13px;'>Contacto: "+state.contacto+"</div>"+
				"</div>"+
				"<div style='font-size:13px;'>Dirección: "+state.direccion+"</div>"+
				"<div style='font-size:13px;'>Ubigeo: "+state.desdep+" / "+state.despro+" / "+state.desdis+"</div>"+
			"</div>"
		);
	}
	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

     $('#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;
}

Tabla de Contenidos