16

Sto pensando di passare da Scelto a Select2 perché Select2 ha metodi nativi per ajax. Ajax è fondamentale perché di solito devi caricare molti dati.Formato JSON per jquery-select2 multi con ajax

Ho eseguito con successo l'esempio con il JSON di api.rottentomatoes.com/api/

ho fatto un file JSON per testare l'Ajax, ma non ha le opere.

Non so come dovrebbe essere il JSON. Sembra che non v'è alcuna documentazione dettagliata:

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

ho cercato senza successo diversi formati JSON, così ho cercato di copiare un formato JSON simile a api.rottentomatoes ma non è così opere.

Mi può mancare qualcosa di stupido.

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

ho fatto questo jsfiddle:

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

+1

Buona domanda compagno, Select2 docs sezione Ajax non aveva senso per me, sono sicuro che molti avranno a questa domanda. –

risposta

31

Se si è passati a JSON assicurarsi di passare dataType a JSON da JSONP.

Il formato è specificato qui: http://ivaynberg.github.io/select2/#doc-query

Il JSON dovrebbe essere simile a questo:

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

In sostanza l'unico attributo necessario nella scelta è la id. se l'opzione contiene altre opzioni secondarie (come nel caso di scelte tipo opt-group), queste vengono specificate all'interno dell'attributo children.

Il renderer di scelta e selezione predefinito prevede un attributo text in ogni scelta: è ciò che viene utilizzato per il rendering della scelta.

così un esempio completo di un renderer di default stato degli Stati Uniti utilizzando potrebbe essere simile a questo:

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

Spero che questo è una buona partenza.

+1

Grazie e congratulazioni, Select2 è davvero fantastico. Mi mancava il parametro "more", tuttavia non vedo più il parametro in api.rottentomatoes json. In ogni modo, ora funziona per me. La ringrazio per la risposta. –

+0

Stavo girando in tondo da Select2 a Google e infine qui. Questa risposta mi ha davvero salvato. Perché non hai un documento dettagliato per le one-liner? non dire di averne uno nella sezione documenti, guardandolo mi sembrava di leggere il russo e non aveva senso –

+2

Apparentemente, in select2 4.0.0, il formato accettato di default ora è {risultati: [{id: 'CA', testo: 'California'}, {id: 'CO', testo: 'Colarado'], paginazione: {more: falso}} (notare l'attributo di impaginazione) – personne3000

0

Documentazione ufficiale per il formato JSON richiesto: rif. https://select2.org/data-sources/formats

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