Laden von remote-Daten nur einmal mit Select2

Wie der Titel schon sagt würde ich gerne zum laden von remote-Daten nur einmal.
Ich dachte über das laden der Daten mit unabhängigen ajax-call und legen Sie es "vor Ort" bei der Kontrolle, aber Frage mich, ob es mehr "eingebaute" Möglichkeit, dies zu tun...

  • Ich glaube nicht, dass es irgendeine eingebaute option in select2 was gibt Ihnen die Flexibilität, die einzige Weise, es zu tun wäre, um die Kontrolle der ajax-Aufruf abhängig, ob es schon genannt wurde, früher oder nicht.dieses controlling sollte im initselection: von select2
InformationsquelleAutor Yaron | 2013-12-20
  1. 7

    eine Lösung kann hier gefunden werden:

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

    $("#selIUT").select2({
    cacheDataSource: [],
    placeholder: "Please enter the name",
    query: function(query) {
        self = this;
        var key = query.term;
        var cachedData = self.cacheDataSource[key];

        if(cachedData) {
            query.callback({results: cachedData.result});
            return;
        } else {
            $.ajax({
              url: '/ajax/suggest/',
              data: { q : query.term },
              dataType: 'json',
              type: 'GET',
              success: function(data) {
                self.cacheDataSource[key] = data;
                query.callback({results: data.result});
              }
            })
        }
    },
    width: '250px',
    formatResult: formatResult, 
    formatSelection: formatSelection, 
    dropdownCssClass: "bigdrop", 
    escapeMarkup: function (m) { return m; } 
});

    Edit:

    Vielleicht habe ich deine Frage falsch interpretiert. wenn Sie möchten, laden Sie alle Daten nur einmal, dann Gebrauch, Select2, es gibt keine eingebaute Funktionalität zu tun.

    Ihren Vorschlag, um eine einzelne Abfrage, und verwenden Sie dann die gespeicherten Daten in Select2 wäre der Weg zu gehen.

    • Ich wünschte, ich könnte für Sie Stimmen, aber ich habe nicht den benötigten Ruf noch: -)
    • Ist dies speichert die Ergebnisse für einen bestimmten Begriff? da die Menge der möglichen Ergebnisse ist statisch? Wird es ausgeführt, der ajax-Aufruf, wenn der Benutzer Typen in einem anderen Begriff?
    • Hallo Yaron, das bedeutet Rückgabe der Ergebnisse für einen bestimmten Begriff. Wollen Sie, um alle möglichen Ergebnisse in einer Abfrage, und verwenden Sie dann die Daten für alle eingegebenen Begriffe in select2?
    • Ja chris... ich überwunden, der cache aber jetzt das AutoVervollständigen funktioniert nicht... ich denke, Es ist lösbar mit einigen tweak beinhaltet, dass die text-Suche...
    • überall, suchen für meine Lösung, die mir helfen, und ich kam diese Antwort.. unvoted.. das ist unglaublich! danke. Ich bin mit der Anwendung dieser auf meine Frage hier: stackoverflow.com/questions/21586773/...
    InformationsquelleAutor Chris W
  2. 0

    Daten laden einmal:

    Annahmen:

    • Haben Sie eine REST-API-Endpunkt at /services, in dem Ihnen ein JSON-array von Objekten

    • Enthält das array Objekte, die mindestens über ein "name" und "id" - Attribut. Beispiel:

      [{"id": 0, "name": "Foo"}, {"id": 1, "name": "Bar"}]

    • Die Sie speichern möchten, dass array als Globale 'services_raw'

    Zunächst unsere Funktion zum laden der Daten und das erstellen der globalen 'services_raw' (AKA 'Fenster.services_raw'):

      fetchFromAPI = function() {
        console.log("fetchFromAPI called");
        var jqxhr = $.ajax(
            {
                dataType:'json',
                type: 'GET',
                url: "/services",
                success: function(data, textStatus, jqXHR) {
                    services_raw = data;
                    console.log("rosetta.fn.fetchServicesFromAPI SUCCESS");
                    rosetta.fn.refreshServicesSelect();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("Error inside rosetta.fn.fetchServicesFromAPI", errorThrown, textStatus, jqXHR);
                    setTimeout(rosetta.fn.fetchServicesFromAPI(), 3000);  //retry in 3 seconds
                }
            }
        )
            .done(function () {
                console.log("success");
                console.log(jqxhr);
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });

        //Perform other work here ...

        //Set another completion function for the request above
        jqxhr.always(function () {
            console.log("second complete");
        });
    };

    Zweite, unser Select2 Instanziierung code und setzt unsere Daten in ein format, dass Select2 kann mit der Arbeit:

    refreshServicesSelect = function () {
    //ref: http://jsfiddle.net/RVnfn/2/
    //ref2: http://jsfiddle.net/RVnfn/101/   # mine
    //ref3: http://jsfiddle.net/RVnfn/102/   # also mine

    console.log('refreshServicesSelect called');
    $("#add-service-select-service").select2({
        //allowClear: true
        data: function() {
            var arr = [];  //container for the results we're returning to Select2 for display

            for (var idx in services_raw) {
                var item = services_raw[idx];
                arr.push({
                    id: item.id,
                    text: item.name,
                    _raw: item  //for convenience
                });
            }
            return {results: arr};
        }
    });
};

    Hier ist, was das Select2-element in HTML Aussehen sollten vor Ihrem Anruf die oben genannten Funktionen:

    <input id="add-service-select-service" type="hidden" style="width:100%">

    Zu benutzen all diese, nennen (JS):

    window.fetchFromAPI();
window.refreshServicesSelect();

    Schließlich, hier ist ein JSFiddle, wo Sie spielen können, mit einem ähnlichen Ding: http://jsfiddle.net/RVnfn/102/

    Im Grunde, in meinem Beispiel oben, wir sind nur mit ajax füllen Sie das äquivalent von Fenster.Pillen in der Geige.

    Hoffe, das hilft 🙂

    Bitte Antworten Sie, wenn Sie wissen, wie Sie über den Select2 .ajax-Funktion, denn das wäre ein wenig kürzer.

    InformationsquelleAutor seanp2k
  3. 0

    Dies ist für Select2 v4.0.3:

    Ich hatte die gleiche Frage und bekam, um es durch das auslösen einer AJAX-Aufruf und die Verwendung der Daten zurückgegeben, als der initialisierte Daten-array.

    //I used an onClick event to fire the AJAX, but this can be attached to any event.
//Ensure ajax call is done *ONCE* with the "one" method.
$('#mySelect').one('click', function(e) {
    //Text to let user know data is being loaded for long requests.
    $('#mySelect option:eq(0)').text('Data is being loaded...');
    $.ajax({
        type: 'POST',
        url: '/RetrieveDropdownOptions',
        data: {}, //Any data that is needed to pass to the controller
        dataType: 'json',
        success: function(returnedData) {
            //Clear the notification text of the option.
            $('#mySelect option:eq(0)').text('');
            //Initialize the Select2 with the data returned from the AJAX.
            $('#mySelect').select2({ data: returnedData });
            //Open the Select2.
            $('#mySelect').select2('open');
        }
    });
    //Blur the select to register the text change of the option.
    $(this).blur();
});

    Dies funktionierte gut für das, was ich im Sinn hatte. Hoffe, das hilft Menschen auf der Suche mit der gleichen Frage.

    • Die select-box versteckt ist, so dass Sie nicht klicken Sie auf es.
    InformationsquelleAutor Ska737
Schreibe einen Kommentar