javascript - bootstrap - Formato JSON para jquery-select2 multi con ajax

select2 ajax on select

Question

Estoy pensando en pasar de Chosen a Select2 porque Select2 tiene métodos nativos para ajax. Ajax es crítico porque normalmente tienes que cargar una gran cantidad de datos.

Ejecuté exitosamente el ejemplo con el JSON de api.rottentomatoes.com/api/

Hice un archivo JSON para probar el ajax, pero no funcionó.

No sé cómo debería ser el JSON. Parece que no hay documentación detallada:

https://github.com/ivaynberg/select2/issues/920

Intenté sin éxito varios formatos JSON, así que intenté copiar un formato JSON similar a api.rottentomatoes pero no funciona.

Puede que me esté perdiendo algo estúpido.

function MultiAjaxAutoComplete(element, url) {
    $(element).select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        multiple: true,
        ajax: {
            url: url,
            dataType: ''jsonp'',
            data: function(term, page) {

                return {
                    q: term,
                    page_limit: 10,
                    apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey
                };
            },
            results: function(data, page) {
                return {
                    results: data.movies
                };
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        /*initSelection: function(element, callback) {
            var data = [];
            $(element.val().split(",")).each(function(i) {
                var item = this.split('':'');
                data.push({
                    id: item[0],
                    title: item[1]
                });
            });
            //$(element).val('''');
            callback(data);
        }*/
    });
};

function formatResult(node) {
    return ''<div>'' + node.id + ''</div>'';
};

function formatSelection(node) {
    return node.id;
};


/*MultiAjaxAutoComplete(''#e6'', ''http://api.rottentomatoes.com/api/public/v1.0/movies.json'');*/

MultiAjaxAutoComplete(''#e6'', ''https://raw.github.com/katio/Quick-i18n/master/test.json'');

$(''#save'').click(function() {
    alert($(''#e6'').val());
});

Hice este jsfiddle:

http://jsfiddle.net/Katio/H9RZm/4/

Answer 1

Documentación oficial para el formato JSON requerido: ref. https://select2.org/data-sources/formats

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}

Answer 2

Si cambió a JSON, asegúrese de cambiar dataType a JSON desde JSONP.

El formato se especifica aquí: http://ivaynberg.github.io/select2/#doc-query

El JSON debería verse así:

{results: [choice1, choice2, ...], more: true/false }

Básicamente, el único atributo requerido en la elección es el id . Si la opción contiene otras opciones secundarias (por ejemplo, en el caso de opciones similares a un grupo opcional), esas se especifican dentro del atributo secundario.

La opción predeterminada y el procesador de selección esperan un atributo de text en cada opción; eso es lo que se usa para representar la opción.

Por lo tanto, un ejemplo completo de un estado de EE. UU. que usa un renderizador predeterminado podría tener este aspecto:

{
    "results": [
        {
            "id": "CA",
            "text": "California"
        },
        {
            "id": "CO",
            "text": "Colarado"
        }
    ],
    "more": false
}

Espero que esto te haga comenzar.