Come risultati di caricamento a discesa Select2 tramite AJAX

Question

Ho una semplice casella di selezione2 che carica un menu a discesa.

Ma qual è il modo migliore per ricaricare il menu a discesa ogni volta che si apre il menu di selezione con i risultati di una chiamata AJAX? La chiamata ajax sarebbe tornato

<option value=1> 
<option value=2> 

e così via

ho sguardo attraverso gli esempi AJAX sui documenti Select2 ma sembra un po 'troppo complicata per quello che mi serve. TIA

Answer 1

Vedere il Caricamento dati remoti esempio su Select2 webpage.

Caricare le opzioni nell'elenco di selezione in modo dinamico utilizzando ajax ogni volta che viene aperto.

$("#e6").select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
      url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
      dataType: 'jsonp', 
      data: function (term, page) { 
       return { 
        q: term, // search term 
        page_limit: 10, 
        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
       }; 
      }, 
      results: function (data, page) { // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to alter remote JSON data 
       return {results: data.movies}; 
      } 
     } 
    }); 

Answer 2

Supponiamo u ha html

<p> 
    Hidden field value set in the following format: 
    <br /> 
    <em>'34:Donnie Darko,54:Heat,27:No Country for Old Men' 
    </em></p> 
<input type='hidden' id="e6" style="width: 500px;" value="34:Donnie Darko,54:Heat,27:No Country for Old Men" /> 
<br /> <button id="save">Save</button> 
<p> 
After it's initialised, the hidden field value will change to:<br /> 
<em>'34,54,27'</em> 
<br /> 
That is the value sent to the server 
</p>​ 

e per select2 Ajax

function MultiAjaxAutoComplete(element, url) { 
    $(element).select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     multiple: true, 
     id: function(e) { return e.id+":"+e.title; }, 
     ajax: { 
      url: url, 
      dataType: 'json', 
      data: function(term, page) { 

       return { 
        q: term, 
        page_limit: 10, 
        apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey 
       }; 
      }, 
      results: function(data, page) { 
       alert(data); 
       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(movie) { 
    return '<div>' + movie.title + '</div>'; 
}; 

function formatSelection(data) { 
    return data.title; 
}; 



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

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

provare a fare multiajax chiamare con questo! Fare riferimento - http://jsfiddle.net/JpvDt/112/

Answer 3

Prova questo:

$(document).ready(function() { 
     $('#Registration').select2({ 
      placeholder: 'Select a registration', 
      allowClear: true, 
      ajax: { 
       quietMillis: 10, 
       cache: false, 
       dataType: 'json', 
       type: 'GET', 
       url: '@Url.Action("GetItems", "ItemsController")', //This asp.net mvc -> use your own URL 
       data: function (registration, page) { 
        return { 
         page: page, 
         pageSize: 100, 
         registration: registration, 
         otherValue: $("#OtherValue").val() // If you have other select2 dropdowns you can get this value 
        }; 
       }, 
       results: function (data, page) { 
        var more = (page * pageSize) < data.total; // whether or not there are more results available 
        return { results: data.dataItems, more: more }; // notice we return the value of more so Select2 knows if more results can be loaded 
       } 
      }, 
      formatResult: FormatResult, 
      formatSelection: FormatSelection, 
      escapeMarkup: function (m) { return m; } 
     }); 
    }); 

    function FormatResult(item) { 
     var markup = ""; 
     if (item.name !== undefined) { 
      markup += "<option value='" + item.id + "'>" + item.name + "</option>"; 
     } 
     return markup; 
    } 

    function FormatSelection(item) { 
     return item.name; 
    } 

Answer 4

Se si sta cercando di mostrare a discesa con JSON pre-caricato di default, in modo che il momento in cui si fa clic su archiviato ci si aspetta a discesa con i dati popolata per presentarsi, senza digitare una singola lettera, impostare minimumInputLength: 0 e funziona come un incantesimo.

Attiva JSON come sarebbe se l'attività "carica JSON su focus utilizzando select2".

Ho aggiunto codice ma a causa di non essere in grado di utilizzare AJAX per recuperare JSON in remoto nello snippet, non riuscivo a far funzionare lo snippet.

Ricorda, questa è la soluzione che hai aggiunto al tuo codice non ne usi uno di seguito elencato. Lo uso per descrivere la correzione.

---

$(".myContainer").select2({ 
    ajax: { 
     url: 'myJSONpath', 
     dataType: 'json', 
     delay: 250, 
     data: function(params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
     }, 
    minimumInputLength: 0, // so here is a trick 0 will trigger ajax call right when you click on field 
    processResults: function(data, params) { 
     //process your results 
    }, 

.... e così si continua con le altre proprietà ...