jQueryUI 1.9
jQueryUI 1.9 hat das Widget für die automatische Vervollständigung mit dem responseEreignis gesegnet , mit dem wir feststellen können, ob keine Ergebnisse zurückgegeben wurden:
Wird nach Abschluss einer Suche ausgelöst, bevor das Menü angezeigt wird. Nützlich für die lokale Bearbeitung von Vorschlagsdaten, bei denen kein benutzerdefinierter Rückruf von Quelloptionen erforderlich ist. Dieses Ereignis wird immer ausgelöst, wenn eine Suche abgeschlossen ist, auch wenn das Menü nicht angezeigt wird, weil keine Ergebnisse vorliegen oder die automatische Vervollständigung deaktiviert ist.
In diesem Sinne wird das Hacking, das wir in jQueryUI 1.8 durchführen mussten, ersetzt durch:
$(function() {
$("input").autocomplete({
source: /* */,
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}
}
});
});
Beispiel: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Ich konnte mit der jQueryUI-API keinen einfachen Weg finden, dies zu tun. Sie könnten jedoch die autocomplete._responseFunktion durch Ihre eigene ersetzen und dann die Standardfunktion jQueryUI aufrufen ( aktualisiert, um das prototypeObjekt der automatischen Vervollständigung zu erweitern ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Binden Sie dann einen Ereignishandler an das autocompletesearchcompleteEreignis (Inhalt ist das Ergebnis der Suche, ein Array):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Was hier passiert ist, dass Sie die responseFunktion der automatischen Vervollständigung in einer Variablen ( __response) speichern und dann verwenden apply, um sie erneut aufzurufen. Ich kann mir keine negativen Auswirkungen dieser Methode vorstellen, da Sie die Standardmethode aufrufen. Da wir den Prototyp des Objekts ändern, funktioniert dies für alle Widgets mit automatischer Vervollständigung.
Hier ist ein funktionierendes Beispiel : http://jsfiddle.net/andrewwhitaker/VEhyV/
In meinem Beispiel wird ein lokales Array als Datenquelle verwendet, aber ich denke nicht, dass dies von Bedeutung sein sollte.
Update: Sie können die neue Funktionalität auch in ein eigenes Widget einbinden und die Standardfunktion für die automatische Vervollständigung erweitern:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Ändern Ihres Anrufs von .autocomplete({...});:
$("input").customautocomplete({..});
Und binden Sie später an das benutzerdefinierte autocompletesearchcompleteEreignis:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Ein Beispiel finden Sie hier : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Da diese Frage / Antwort einige Aufmerksamkeit erhalten hat, dachte ich, ich würde diese Antwort mit einer weiteren Möglichkeit aktualisieren, um dies zu erreichen. Diese Methode ist am nützlichsten, wenn Sie nur ein Widget für die automatische Vervollständigung auf der Seite haben. Diese Methode kann auf ein Widget für die automatische Vervollständigung angewendet werden, das eine Remote- oder lokale Quelle verwendet:
var src = [...];
$("#auto").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(src, request.term);
if (!results.length) {
$("#no-results").text("No results found!");
} else {
$("#no-results").empty();
}
response(results);
}
});
In diesem Bereich platzieren ifSie Ihre benutzerdefinierte Logik, die ausgeführt werden soll, wenn keine Ergebnisse erkannt werden.
Beispiel: http://jsfiddle.net/qz29K/
Wenn Sie eine entfernte Datenquelle verwenden, sagen Sie Folgendes:
$("#auto").autocomplete({
source: "my_remote_src"
});
Dann müssen Sie Ihren Code ändern, damit Sie den AJAX selbst aufrufen und erkennen können, wann 0 Ergebnisse zurückkommen:
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "my_remote_src",
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
// Do logic for empty result.
}
},
error: function () {
response([]);
}
});
}
});