jQuery UI-autocomplete mit JSON von URL

Bin ich mit dem jQuery-UI-Autocomplete-Funktion. Kann ich machen, damit es funktioniert mit den im Beispiel mit jQuery UI wie diese:

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#tags").autocomplete({
    source: availableTags
});

Dieses funktioniert ohne Probleme. Aber ich brauche für die Verwendung von JSON als meine Datenquelle, die abgerufen werden können, wie diese: http://mysite.local/services/suggest.ashx?query=ball

Wenn ich dabei bin, die URL bekomme ich JSON zurück wie diese:

 [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

Wie kann ich meine URL als Datenquelle?

Ich habe versucht, die änderung der source-option wie folgt:

$("#tags").autocomplete({
    source: "http://mysite.local/services/suggest.ashx"
});

Aber es hilft nicht. Ich denke, dass der service nicht weiß, welches keyword wurde in das Eingabefeld eingegeben oder so???

Jegliche Hinweise wäre toll.

InformationsquelleAutor Kim Andersen | 2012-09-11
  1. 12

    Müssen Sie ändern Sie Ihre Quelle, um die den folgenden Spezifikationen entsprechen (wie in der Dokumentation für das widget). Die Quelle muss ein array (oder ein array zurückgeben mit):

    • Einfache strings, oder:
    • Objekte mit einem label Eigenschaft, eine value Eigenschaft, oder beides.

    Wenn aus irgendeinem Grund Sie nicht ändern können, was Ihre remote-Quelle zurückkehrt, können Sie die Daten transformieren, einmal hat es erfolgreich abgerufen. Hier ist, wie Sie das tun würden:

    $("#tags").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://mysite.local/services/suggest.ashx",
            data: { query: request.term },
            success: function (data) {
                var transformed = $.map(data, function (el) {
                    return {
                        label: el.phrase,
                        id: el.id
                    };
                });
                response(transformed);
            },
            error: function () {
                response([]);
            }
        });
    });
});

    Wie Sie sehen können, den Sie brauchen, um den AJAX-Aufruf selbst, durch die übergabe einer Funktion an die source Möglichkeit, das widget.

    Die Idee ist, $.map verwandeln Sie Ihr array in ein array, das die Elemente enthält, die das autocomplete-widget analysieren kann.

    Beachten Sie auch, dass die data parameter, der an die AJAX-Aufruf sollte am Ende als ?query=<term> wenn der Benutzer einen Begriff.

    • Danke für deine Antwort. Ich denke, ich kann das Bearbeiten der zurückgegebenen JSON an das label und Wert statt id und Satz. Aber wenn ich die zurückgegebenen JSON, habe ich den richtigen Quellcode in meinem Beispiel, oder muss ich zum senden der eingegeben text an den Dienst in irgendeiner Weise. Ich meine die Leistung nimmt einen Parameter namens "query", also in gewisser Weise denke ich muss es haben, dass param senden, um Sie als gut. Oder bin ich Total Weg von hier?
    • Also, wenn Sie ändern Sie Ihre web-service für die Rückkehr der rechten Sache, aber ein argument genannt query Ihr code wird ähnlich Aussehen wie die oben, außer Sie werden einfach anrufen response(data) im success handler. In anderen Worten, da ändern Sie die Standard-AJAX-request stattfindet, werden Sie noch haben, es selbst zu tun.
    • Toll, ich werde das ausprobieren, wenn ich wieder zu meinem Entwicklungs-Rechner. Und durch das schreiben von Daten: { query: Anfrage.term } der webservice aufgerufen wird, werden mit den rechten Eingang als query-parameter richtig?
    • Yep! request.term ist der Begriff, den der user gesucht.
    InformationsquelleAutor Andrew Whitaker
Schreibe einen Kommentar