jQueryUI 1.9
jQueryUI 1.9 ha benedetto il widget di completamento automatico con l' responseevento, che possiamo sfruttare per rilevare se non sono stati restituiti risultati:
Attivato al termine di una ricerca, prima che venga visualizzato il menu. Utile per la manipolazione locale dei dati dei suggerimenti, in cui non è richiesta una richiamata dell'opzione di origine personalizzata. Questo evento viene sempre attivato al termine di una ricerca, anche se il menu non verrà mostrato perché non ci sono risultati o il completamento automatico è disabilitato.
Quindi, con questo in mente, l'hacking che dovevamo fare in jQueryUI 1.8 è stato sostituito con:
$(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();
}
}
});
});
Esempio: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Non sono riuscito a trovare un modo semplice per farlo con l'API jQueryUI, tuttavia, potresti sostituire la autocomplete._responsefunzione con la tua e quindi chiamare la funzione jQueryUI predefinita ( aggiornata per estendere l' prototypeoggetto del completamento automatico ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
E quindi associa un gestore di eventi autocompletesearchcompleteall'evento (il contenuto è il risultato della ricerca, un array):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Quello che sta succedendo qui è che stai salvando la responsefunzione di completamento automatico in una variabile ( __response) e quindi usando applyper richiamarla di nuovo. Non riesco a immaginare alcun effetto negativo da questo metodo poiché stai chiamando il metodo predefinito. Poiché stiamo modificando il prototipo dell'oggetto, questo funzionerà per tutti i widget a completamento automatico.
Ecco un esempio funzionante : http://jsfiddle.net/andrewwhitaker/VEhyV/
Il mio esempio utilizza un array locale come origine dati, ma non credo che dovrebbe avere importanza.
Aggiornamento: puoi anche racchiudere la nuova funzionalità nel proprio widget, estendendo la funzionalità di completamento automatico predefinita:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Modificare la chiamata da .autocomplete({...});a:
$("input").customautocomplete({..});
Quindi associa autocompletesearchcompleteall'evento personalizzato in un secondo momento:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Guarda un esempio qui : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Poiché questa domanda / risposta ha ricevuto una certa attenzione, ho pensato di aggiornare questa risposta con un altro modo per ottenere ciò. Questo metodo è molto utile quando si ha solo un widget di completamento automatico nella pagina. Questo modo di farlo può essere applicato a un widget di completamento automatico che utilizza un'origine remota o locale:
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);
}
});
All'interno di ifè dove inseriresti la tua logica personalizzata da eseguire quando non vengono rilevati risultati.
Esempio: http://jsfiddle.net/qz29K/
Se stai utilizzando un'origine dati remota, dì qualcosa del genere:
$("#auto").autocomplete({
source: "my_remote_src"
});
Quindi dovrai cambiare il tuo codice in modo da effettuare la chiamata AJAX da solo e poter rilevare quando vengono restituiti 0 risultati:
$("#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([]);
}
});
}
});