How to make a custom select2 as it appears in the API of the same plugin?

Question

How to make a custom select2 as it appears in the API of the same plugin?

Navigation

#1 by (0 votes)

3

I can not find how to customize my select2 as they do in the API. ( here the link ).

I search everywhere and in the same Pligin API they do not specify anything of how to do it. I clarify that I do it in my system but in a simple way.

Here's the code:

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

Update 1: The result that throws me is the following:

I would like something like in the documentation:

I want to do something like this to place the descriptions of the lots that are better ordered and not separated by a "/", it's the only thing that occurred to me.

javascript jquery select2

asked by Pablo Contreras 26.02.2017 в 17:46

source

1 answer

Disable the functions of the three buttons (Back, Home, change app) android [closed] Failed to solve the errors indicated by Google developers pagespeed js + css [closed]

score 0 · Accepted Answer

It is now our creativity to create the select , I manage it in the following way (in the jSon):

id for the value of the select

text for the text that will be displayed when the selected one is selected

description or other json columns that you want to add I use them as styles for the 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>