jQueryUI 1.9
jQueryUI 1.9 ha bendecido el widget de autocompletar con el responseevento, que podemos aprovechar para detectar si no se devolvieron resultados:
Se activa después de que se completa una búsqueda, antes de que se muestre el menú. Útil para la manipulación local de datos de sugerencias, donde no se requiere una devolución de llamada de opción de fuente personalizada. Este evento siempre se activa cuando se completa una búsqueda, incluso si el menú no se mostrará porque no hay resultados o la función Autocompletar está desactivada.
Entonces, con eso en mente, la piratería que tuvimos que hacer en jQueryUI 1.8 se reemplaza 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();
}
}
});
});
Ejemplo: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
No pude encontrar una manera sencilla de hacer esto con la API jQueryUI, sin embargo, puede reemplazar la autocomplete._responsefunción con la suya y luego llamar a la función jQueryUI predeterminada ( actualizada para extender el prototypeobjeto de autocompletar ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Y luego vincule un controlador de autocompletesearchcompleteeventos al evento (el contenido es el resultado de la búsqueda, una matriz):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Lo que está sucediendo aquí es que está guardando la responsefunción de autocompletar en una variable ( __response) y luego la usa applypara llamarla nuevamente. No puedo imaginar ningún efecto negativo de este método ya que está llamando al método predeterminado. Dado que estamos modificando el prototipo del objeto, esto funcionará para todos los widgets de autocompletar.
Aquí hay un ejemplo de trabajo : http://jsfiddle.net/andrewwhitaker/VEhyV/
Mi ejemplo usa una matriz local como fuente de datos, pero no creo que eso deba importar.
Actualización: también puede envolver la nueva funcionalidad en su propio widget, extendiendo la funcionalidad predeterminada de autocompletar:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Cambiar su llamada de .autocomplete({...});a:
$("input").customautocomplete({..});
Y luego enlazar al autocompletesearchcompleteevento personalizado más tarde:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Vea un ejemplo aquí : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Dado que esta pregunta / respuesta ha recibido algo de atención, pensé en actualizar esta respuesta con otra forma de lograrlo. Este método es más útil cuando solo tiene un widget de autocompletar en la página. Esta forma de hacerlo se puede aplicar a un widget de autocompletar que usa una fuente remota o local:
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);
}
});
Dentro de ifes donde colocaría su lógica personalizada para ejecutar cuando no se detectan resultados.
Ejemplo: http://jsfiddle.net/qz29K/
Si está utilizando una fuente de datos remota, diga algo como esto:
$("#auto").autocomplete({
source: "my_remote_src"
});
Luego, deberá cambiar su código para que pueda hacer que AJAX se llame usted mismo y pueda detectar cuándo regresan 0 resultados:
$("#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([]);
}
});
}
});