Wie kann Select2 Dropdown laden Ergebnisse über AJAX

Question

Ich habe eine einfache select2-Box, die ein Dropdown-Menü lädt.

Aber was ist der beste Weg, um das Dropdown-Menü jedes Mal neu zu laden, wenn das Auswahlmenü mit den Ergebnissen eines AJAX-Anrufs geöffnet wird? Der Ajax-Aufruf zurückkehren würde

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

und so weiter

I Blick durch die AJAX-Beispiele auf den select2 docs haben, aber es sieht ein wenig zu kompliziert für das, was ich brauche. TIA

Answer 1

Siehe die Loading Remote Data Beispiel auf der .

Es wird die Optionen in der Auswahlliste dynamisch jedes Mal mit Ajax laden, wenn es geöffnet wird.

$("#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

Angenommen u html mit diesem

<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>​ 

und für 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()); 
}); 

Versuchen Sie, multiajax anrufen! Siehe - http://jsfiddle.net/JpvDt/112/

Answer 3

Versuchen Sie folgendes:

$(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

Wenn Sie versuchen, standardmäßig mit vorinstallierten JSON Drop-down-zeigen, so dass der Moment, den Sie auf klicken eingereicht Sie erwarten Drop-down mit bevölkerten Daten um anzuzeigen, ohne einen einzigen Buchstaben einzugeben, Set minimumInputLength: 0 und funktioniert wie ein Charme.

Es löst JSON wie es wäre, wenn Ihre Aufgabe ist "JSON auf Fokus mit select2 laden".

Ich habe Code hinzugefügt, aber weil ich AJAX nicht verwenden kann, um JSON remote im Snippet abzurufen, konnte ich Snippet nicht arbeiten.

Denken Sie daran, dies ist die Lösung, die Sie Ihrem Code hinzugefügt haben, verwenden Sie keine der unten aufgeführten. Ich benutze es, um das Problem zu beschreiben.

---

$(".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 
    }, 

.... und eine mit der anderen Eigenschaften so weiter ...