jQueryUI 1.9
jQueryUI 1.9 a béni le widget de saisie semi-automatique avec l' responseévénement, que nous pouvons exploiter pour détecter si aucun résultat n'a été renvoyé:
Déclenché après la fin d'une recherche, avant que le menu ne s'affiche. Utile pour la manipulation locale des données de suggestion, où un rappel d'option de source personnalisé n'est pas nécessaire. Cet événement est toujours déclenché lorsqu'une recherche se termine, même si le menu ne sera pas affiché car il n'y a aucun résultat ou la saisie semi-automatique est désactivée.
Donc, dans cet esprit, le piratage que nous avons dû faire dans 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 n'ai pas trouvé de moyen simple de le faire avec l'API jQueryUI, cependant, vous pouvez remplacer la autocomplete._responsefonction par la vôtre, puis appeler la fonction jQueryUI par défaut ( mise à jour pour étendre l' prototypeobjet de la saisie semi-automatique ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Et puis liez un gestionnaire d'événements à 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 enregistrez la responsefonction de saisie semi-automatique dans une variable ( __response), puis que vous l'utilisez applypour la rappeler. Je ne peux imaginer aucun effet néfaste de cette méthode puisque vous appelez la méthode par défaut. Puisque nous modifions le prototype de l'objet, cela fonctionnera pour tous les widgets de saisie semi-automatique.
Voici un exemple de travail : http://jsfiddle.net/andrewwhitaker/VEhyV/
Mon exemple utilise un tableau local comme source de données, mais je ne pense pas que cela devrait avoir de l'importance.
Mise à jour: vous pouvez également intégrer la nouvelle fonctionnalité dans son propre widget, étendant la fonctionnalité de saisie semi-automatique par défaut:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Modification de votre appel de .autocomplete({...});à:
$("input").customautocomplete({..});
Et puis liez-vous à l' autocompletesearchcompleteévénement personnalisé plus tard:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Voir un exemple ici : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Étant donné que cette question / réponse a attiré l'attention, j'ai pensé mettre à jour cette réponse avec une autre façon d'accomplir cela. Cette méthode est particulièrement utile lorsque vous n'avez qu'un seul widget de saisie semi-automatique sur la page. Cette façon de faire peut être appliquée à un widget de saisie semi-automatique qui utilise une source distante ou 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);
}
});
À l'intérieur de, ifvous placeriez votre logique personnalisée à exécuter lorsqu'aucun résultat n'est détecté.
Exemple: http://jsfiddle.net/qz29K/
Si vous utilisez une source de données distante, dites quelque chose comme ceci:
$("#auto").autocomplete({
source: "my_remote_src"
});
Ensuite, vous devrez modifier votre code afin de faire l'appel AJAX vous-même et de détecter le retour de 0 résultat:
$("#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([]);
}
});
}
});