Ich frage mich, wie man einen benutzerdefinierten Handler abfangen und hinzufügen kann, wenn bei Verwendung von @ leere Ergebnisse vom Server zurückgegeben werdejQueryUI autocomplete.

Es scheinen ein paar Fragen zu diesem Punkt zu geben, die sich auf die verschiedenen jQuery-Plugins beziehen (z. B.jQuery Autocomplete zeigt die Fehlermeldung "Keine Daten" an, wenn die Ergebnisse leer sind), aber ich frage mich, ob es einen besseren / einfacheren Weg gibt, um dasselbe mit der automatischen Vervollständigung von jQueryUI zu erreichen.

Es scheint mir, dass dies ein häufiger Anwendungsfall ist, und ich dachte, dass jQueryUI die automatische Vervollständigung von jQuery verbessert hat, indem es die Fähigkeit hinzugefügt hat, diese Situation sauber zu handhaben. Ich konnte jedoch keine Dokumentation für eine solche Funktionalität finden, und bevor ich mich davon abkehre, möchte ich einige Fühler wegwerfen, falls andere dies schon einmal gesehen haben.

Während wahrscheinlich nicht besonders einflussreich, kann ich den Server irgendetwas zurückgeben lassen - z.HTTP 204: No Content zu einer leeren 200 / JSON-Liste - was auch immer es am einfachsten macht, das Ergebnis in der automatischen Vervollständigung von jQueryUI abzufangen.

Mein erster Gedanke ist, einen Rückruf mit zwei Argumenten zu übergeben, nämlich einem Anforderungsobjekt und einemresponse callback um den Code zu handhaben, siehe Dokumentation:

Die dritte Variante, der Rückruf, bietet die größte Flexibilität und kann zum Verbinden einer beliebigen Datenquelle mit Autocomplete verwendet werden. Der Rückruf erhält zwei Argumente:

Ein Anforderungsobjekt mit einer einzelnen Eigenschaft namens "term", die sich auf den aktuell in der Texteingabe enthaltenen Wert bezieht. Wenn der Benutzer beispielsweise "new yo" in ein Stadtfeld eingibt, entspricht der Begriff "Autocomplete" "new yo".

Ein Antwort-Rückruf, der erwartet, dass ein einzelnes Argument die Daten enthält, die dem Benutzer vorgeschlagen werden sollen. Diese Daten sollten basierend auf dem angegebenen Begriff gefiltert werden und können in einem der oben beschriebenen Formate für einfache lokale Daten vorliegen (String-Array oder Object-Array mit label / value / both-Eigenschaften).

Wenn der Antwort-Callback keine Daten empfängt, fügt er ein spezielles einzeiliges Objekt-Array ein, das eine Beschriftung und einen Indikator dafür enthält, dass keine Daten vorhanden sind.

Das scheint zu kompliziert. Ich würde es vorziehen, eine Quelle zu verwenden: "http: // ..." und irgendwo einen Rückruf zu erhalten, der anzeigt, dass keine Daten zurückgegeben wurden.

Vielen Dank für das Lesen.

Brian

BEARBEITEN

Hier ist eine Wrapper-Funktion, die ich erstellt habe, um dieses Problem zu lösen. Sie basiert auf der Versicherung von @ ThiefMaster, dass dies der richtige Weg ist:

    function autocomplete(input, source_url, on_select, on_focus, default_data) {
        /* Autocompletion for an input field
         * input: the field for autocompleting
         * source_url: the JSON url for getting data
         * on_select: function (event,ui) - when someone selects an element
         * on_focus: function (event, ui) - when someone focuses an element
         * default_data: function () returning default data; alternatively is the
         *               default dataset e.g. {'label':'X','value':'Y'}
         */

        $(input).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: source_url,
                    dataType: "json",
                    data: request,
                    success: function (data) {
                        if (!data.length) { // expect [] or ""
                            var def_data = typeof(default_data) == 'function' ?
                                default_data() : default_data;
                            response(def_data);
                        } else {
                            response(data);
                        }
                    }
                });
            },
            minLength: 3,
            select: on_select,
            focus: on_focus,
        });
    }