jQueryUI 1.9
jQueryUI 1.9 a béni le widget de saisie semi-automatique avec l' response événement, dont nous pouvons tirer profit pour détecter si aucun résultat n'a été retourné:
Déclenché après une recherche terminée, avant que le menu est affiché. Utile pour les locaux de manipulation de la suggestion, de données, d'où une coutume source de l'option de rappel n'est pas nécessaire. Cet événement est toujours déclenché une fois la recherche terminée, même si le menu n'apparaît pas, car il n'y a pas des résultats ou de la saisie semi-automatique est désactivé.
Donc, avec cela à l'esprit, le piratage, nous avons eu à faire à jQueryUI 1.8 est remplacé par:
$(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();
}
}
});
});
Exemple: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Je ne pouvais pas trouver un moyen simple de faire cela avec la jQueryUI API, cependant, vous pouvez remplacer l' autocomplete._response fonction de vos propres, et ensuite appeler le défaut de jQueryUI fonction (mis à jour afin de prolonger la saisie semi-automatique de l' prototype objet):
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Et puis de lier un gestionnaire d'événement à l' autocompletesearchcomplete événement (le contenu est le résultat de la recherche, un tableau):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Ce qui se passe ici, c'est que vous êtes en train d'enregistrer la saisie semi-automatique de l' response fonction à une variable (__response) et ensuite à l'aide d' apply de l'appeler à nouveau. Je ne peux pas imaginer tous les mauvais effets de cette méthode puisque vous êtes à l'appel de la méthode par défaut. Puisque nous sommes modifier le prototype de l'objet, cela fonctionne pour tous de saisie semi-automatique des widgets.
Voici un exemple: http://jsfiddle.net/andrewwhitaker/VEhyV/
Mon exemple utilise un local tableau en tant que source de données, mais je ne pense pas que devrait avoir de l'importance.
Mise à jour: Vous pouvez aussi envelopper la nouvelle fonctionnalité dans son propre widget, l'extension de la valeur par défaut de la fonctionnalité de saisie semi-automatique:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Changer votre appel à partir d' .autocomplete({...}); :
$("input").customautocomplete({..});
Et puis lier à la coutume autocompletesearchcomplete plus tard:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Voir un exemple ici: http://jsfiddle.net/andrewwhitaker/VBTGJ/
Depuis que cette question/réponse a obtenu une certaine attention, je pensais que je mettrais à jour cette réponse avec encore une autre façon d'accomplir cette tâche. Cette méthode est particulièrement utile lorsque vous n'avez qu' une saisie semi-automatique widget sur la page. Cette manière de faire peut être appliqué à un widget de saisie semi-automatique qui utilise un local ou à distance source:
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);
}
});
À l'intérieur de l' if est l'endroit où vous placez votre logique personnalisée pour s'exécuter lors de l'absence de résultats sont détectés.
Exemple: http://jsfiddle.net/qz29K/
Si vous utilisez une source de données distante, dire quelque chose comme ceci:
$("#auto").autocomplete({
source: "my_remote_src"
});
Ensuite, vous aurez besoin de modifier votre code afin que vous preniez l'appel AJAX vous-même et peut détecter lorsque 0 résultats reviennent:
$("#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([]);
}
});
}
});
