jQueryUI 1.9
jQueryUI 1.9 abençoou o widget de preenchimento automático com o response evento, que podemos aproveitar para detectar se nenhum resultado foi retornado:
Disparado após a conclusão de uma pesquisa, antes de o menu ser mostrado. Útil para manipulação local de dados de sugestão, onde um retorno de chamada de opção de fonte personalizada não é necessário. Este evento é sempre acionado quando uma pesquisa é concluída, mesmo que o menu não seja mostrado porque não há resultados ou o preenchimento automático está desabilitado.
Então, com isso em mente, o hacking que tivemos que fazer no jQueryUI 1.8 foi substituído por:
$(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();
}
}
});
});
Exemplo: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Não consegui encontrar uma maneira direta de fazer isso com a API jQueryUI, no entanto, você pode substituir a autocomplete._responsefunção pela sua própria e, em seguida, chamar a função jQueryUI padrão ( atualizada para estender o prototypeobjeto do preenchimento automático ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
E, em seguida, vincule um manipulador de autocompletesearchcompleteeventos ao evento (o conteúdo é o resultado da pesquisa, uma matriz):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
O que está acontecendo aqui é que você está salvando a responsefunção de preenchimento automático em uma variável ( __response) e usando applypara chamá-la novamente. Não consigo imaginar nenhum efeito negativo desse método, já que você está chamando o método padrão. Como estamos modificando o protótipo do objeto, isso funcionará para todos os widgets de preenchimento automático.
Aqui está um exemplo prático : prático http://jsfiddle.net/andrewwhitaker/VEhyV/
Meu exemplo usa uma matriz local como fonte de dados, mas não acho que isso deva importar.
Atualização: você também pode envolver a nova funcionalidade em seu próprio widget, estendendo a funcionalidade de preenchimento automático padrão:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Alterando sua chamada de .autocomplete({...});para:
$("input").customautocomplete({..});
E depois vincule ao autocompletesearchcompleteevento personalizado :
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Veja um exemplo aqui : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Como essa pergunta / resposta recebeu alguma atenção, pensei em atualizar esta resposta com outra maneira de fazer isso. Este método é mais útil quando você tem apenas um widget de preenchimento automático na página. Essa maneira de fazer isso pode ser aplicada a um widget de preenchimento automático que usa uma fonte remota ou 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 do ifé onde você colocaria sua lógica customizada para executar quando nenhum resultado fosse detectado.
Exemplo: http://jsfiddle.net/qz29K/
Se você estiver usando uma fonte de dados remota, diga algo assim:
$("#auto").autocomplete({
source: "my_remote_src"
});
Em seguida, você precisará alterar seu código para que você mesmo faça a chamada AJAX e possa detectar quando nenhum resultado voltar:
$("#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([]);
}
});
}
});