3

No encuentro como personalizar mi select2 como lo hacen en la API. (aqui el enlace).

Busco en todos lados y en la misma API del pligin no especifican nada de como hacerlo. Aclaro que lo hago en mi sistema pero de manera sencilla.

Aca el codigo:

$('#crear_lineas_de_produccion').select2({
    placeholder: "Nombre",
    allowClear: true,
    ajax: {
        type: "GET",
        dataType: 'json',
        url: 'procesos/select/getLineasdeProduccion',
        delay: 250,
        data: function(params) {
            return {
                term: params.term, // search term
                page: params.page || 1, //page number
            }
        },
        processResults: function (data, page) {
            return {
                results: data.results,
                pagination: {
                    more: data.pagination.more,
                }
            };
        },
        cache: true
    }
});

Actualización 1: El resultado que me arroja es el siguiente: introducir la descripción de la imagen aquí

Yo quisiera algo como en la documentación: introducir la descripción de la imagen aquí

Quiero hacer algo así para colocar las descripciones de los lotes mejor ordenados y no separados por un "/", es lo único que se me ocurrió.

5
  • ¿Da error? ¿Qué error? Siempre conviene comentar el resultado de lo que intentas hacer.
    – A. Cedano
    Commented el 26 feb. 2017 a las 16:51
  • @A.Cedano No da error, pero lo que quiero es personalizarlo como lo hacen en la documentación del mismo.
    – bypabloc_
    Commented el 26 feb. 2017 a las 17:00
  • Si explicas lo que quiere decir personalizarlo creo que será más fácil ayudarte, así como si compartes el trozo de html que va ligado a tu jQuery. No estamos, como tú, frente a tu monitor, ni podemos adivinar lo que quieres. :) Saludos.
    – A. Cedano
    Commented el 26 feb. 2017 a las 17:01
  • @A.Cedano ya coloque unos screenshot de lo que deseo personalizar.
    – bypabloc_
    Commented el 26 feb. 2017 a las 17:03
  • Los screen shots serán muy fáciles de hacer, pero poco útiles a la hora de responder: 1º porque si el otro está desde un móvil no se ven, 2º porque no siempre explica lo que hay en la mente del usuario. Cuando puedas revisa por favor esto: es.stackoverflow.com/help/how-to-ask-beta Considero que si en la pregunta redactas con palabras lo que quieres hacer sería más útil.
    – A. Cedano
    Commented el 26 feb. 2017 a las 17:08

1 respuesta 1

0

Ya queda de nuestra creatividad crear los select, yo lo manejo de la siguiente manera (en el jSon):

id para el value del select
text para el texto que se mostrara al estar el seleccionado el select
descripción u otras columnas del json que deseen agregar las utilizo como estilos para el select

var data = [
    {"id":1,"text":"Solidos","descripcion":"Fabricación de productos Solidos"},
    {"id":2,"text":"Líquidos Esteriles","descripcion":"Fabricación de productos liquidos que requieren un tratado mas delicado"},{"id":3,"text":"Líquidos No Esteriles","descripcion":"Fabricación de productos liquidos que requieren un tratado no tan delicado"}];


    $("select").select2({
      data: data,
    	        escapeMarkup: function (markup) { return markup; },
    	        templateResult: formatData,
    	        templateSelection: formatDataSelection
    });

          	function formatData (data) {
          		if (data.loading) return data.text;
    		    var markup = '<div clas="col-sm-12"><b>' + data.text + '</b></div>';
    		    	markup += '<div clas="col-sm-12"><span class="fa fa-info"></span> <small>' + data.descripcion + '</small></div>';
              	//console.debug(data);
              	//markup = "<h1>" + data.text + "</h1>" + "<p>" + data.text + "</p>";
              	return markup;
            }

            function formatDataSelection (data) {
              	return data.text;
            }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <select style="width: 100%"></select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.