jQueryUI 1.9.0
jQueryUI 1.9 pobłogosławił widżet autouzupełniania responsezdarzeniem, które możemy wykorzystać do wykrycia, jeśli żadne wyniki nie zostały zwrócone:
Wywoływane po zakończeniu wyszukiwania, przed wyświetleniem menu. Przydatne do lokalnego manipulowania danymi sugestii, gdy nie jest wymagane wywołanie zwrotne opcji niestandardowego źródła. To zdarzenie jest wywoływane zawsze po zakończeniu wyszukiwania, nawet jeśli menu nie zostanie wyświetlone, ponieważ nie ma wyników lub funkcja autouzupełniania jest wyłączona.
Mając to na uwadze, hakowanie, które musieliśmy zrobić w jQueryUI 1.8, zostało zastąpione przez:
$(function() {
$("input").autocomplete({
source: ,
response: function(event, ui) {
if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}
}
});
});
Przykład: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8.0
Nie mogłem znaleźć prostego sposobu na zrobienie tego za pomocą interfejsu API jQueryUI, jednak możesz zastąpić autocomplete._responsefunkcję własną, a następnie wywołać domyślną funkcję jQueryUI ( zaktualizowaną w celu rozszerzenia prototypeobiektu autouzupełniania ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Następnie powiąż procedurę obsługi zdarzeń ze autocompletesearchcompletezdarzeniem (zawartość jest wynikiem wyszukiwania, tablicą):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Chodzi tutaj o to, że zapisujesz responsefunkcję autouzupełniania w zmiennej ( __response), a następnie używasz jej applydo ponownego wywołania. Nie mogę sobie wyobrazić żadnych złych skutków tej metody, ponieważ wywołujesz metodę domyślną. Ponieważ modyfikujemy prototyp obiektu, będzie to działać dla wszystkich widżetów autouzupełniania.
Oto działający przykład : http://jsfiddle.net/andrewwhitaker/VEhyV/
Mój przykład używa tablicy lokalnej jako źródła danych, ale nie sądzę, żeby to miało znaczenie.
Aktualizacja: Możesz również opakować nową funkcjonalność we własnym widżecie, rozszerzając domyślną funkcję autouzupełniania:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Zmiana połączenia z .autocomplete({...});na:
$("input").customautocomplete({..});
A później powiąż ze autocompletesearchcompletezdarzeniem niestandardowym :
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Zobacz przykład tutaj : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Ponieważ to pytanie / odpowiedź zwróciło uwagę, pomyślałem, że zaktualizuję tę odpowiedź o jeszcze inny sposób, aby to osiągnąć. Ta metoda jest najbardziej przydatna, gdy na stronie znajduje się tylko jeden widżet autouzupełniania. Ten sposób można to zrobić w przypadku widgetu autouzupełniania, który korzysta ze źródła zdalnego lub lokalnego:
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);
}
});
Wewnątrz ifjest miejsce, w którym można umieścić niestandardową logikę do wykonania, gdy nie zostaną wykryte żadne wyniki.
Przykład: http://jsfiddle.net/qz29K/
Jeśli korzystasz ze zdalnego źródła danych, powiedz coś takiego:
$("#auto").autocomplete({
source: "my_remote_src"
});
Następnie musisz zmienić kod, aby samodzielnie wykonać połączenie AJAX i wykryć, kiedy wróci 0 wyników:
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "my_remote_src",
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
}
},
error: function () {
response([]);
}
});
}
});