Wie kann Select2 dropdown-Ergebnisse laden über AJAX

Habe ich eine einfache select2-box, die Lasten, die ein dropdown-Menü.

Aber was ist der beste Weg, um neu zu laden Sie das dropdown-Menü jedes mal, wenn das select-Menü wird geöffnet, mit dem Ergebnis eines AJAX-call? Der ajax-Aufruf zurückkehren würde

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

und so weiter

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

Könnten Sie uns ein wenig mehr Kontext? Es ist schwer zu verstehen, Ihre Frage jetzt.
Kuck mal hier brytestudio.com/blog/....

InformationsquelleAutor Richard Alastair Harley | 2012-11-13

Übernehmen u die 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>

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 Anruf mit dieser !
Siehe - http://jsfiddle.net/JpvDt/112/

Wenn diese Antwort zufrieden ist, akzeptieren Sie Gefälligst
Könnten Sie mir sagen, was ist-Daten.Filme hier? Wie wird die JSON-Datei Aussehen? Danke.

InformationsquelleAutor Sri

Versuchen Sie dies:

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

InformationsquelleAutor Peter Ming

Sehen die Laden von Remote-Daten Beispiel auf die Select2 Webseite.

Wird es laden Sie die Optionen in der select-Liste dynamisch mit ajax jedes mal, 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};
            }
        }
    });

InformationsquelleAutor stpe

0

Wenn Sie versuchen, um zu zeigen, drop-down mit vorinstallierten JSON standardmäßig, also der moment, Sie klicken Sie auf eingereicht, die Sie erwarten, drop-down mit aufgefüllt, bis die Daten angezeigt werden, ohne Eingabe von Buchstaben, Satz minimumInputLength: 0 und funktioniert wie ein Charme.

Löst JSON wie es wäre, wenn Ihre Aufgabe ist es, "load JSON auf Fokus mit select2".

Ich habe code, der aber aufgrund der nicht in der Lage sein, um AJAX verwenden, um abrufen von JSON aus der Ferne im snippet konnte ich nicht machen, snippet Arbeit.

Denken Sie daran, dies ist die Lösung, die Sie Hinzugefügt, um Ihren code nicht verwenden Sie eine der unten aufgelistet ist. Ich benutze es, um zu beschreiben, zu beheben.
```
  $(".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 so wird man weiterhin mit Ihren anderen Eigenschaften...

InformationsquelleAutor StefaDesign

Dies wird Ihnen helfen,

$(document).ready(function(){

 $("#selUser").select2({
  ajax: { 
   url: "getData.php",
   type: "post",
   dataType: 'json',
   delay: 250,
   data: function (params) {
    return {
      searchTerm: params.term //search term
    };
   },
   processResults: function (response) {
     return {
        results: response
     };
   },
   cache: true
  }
 });
});

InformationsquelleAutor augustine jenin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.