jQueryUI 1.9
jQueryUI 1.9, otomatik tamamlama widget'ını responseetkinlikle kutsadı; bu , hiçbir sonucun döndürülmediğini tespit etmek için yararlanabileceğimiz bir etkinlik:
Bir arama tamamlandıktan sonra menü gösterilmeden önce tetiklenir. Özel bir kaynak seçeneği geri aramasının gerekli olmadığı durumlarda öneri verilerinin yerel olarak işlenmesi için kullanışlıdır. Bu olay, sonuç olmadığından veya Otomatik Tamamlama devre dışı bırakıldığından menü gösterilmese bile, bir arama tamamlandığında her zaman tetiklenir.
Bu nedenle, bunu akılda tutarak, jQueryUI 1.8'de yapmamız gereken hackleme şu şekilde değiştirildi:
$(function() {
$("input").autocomplete({
source: ,
response: function(event, ui) {
if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}
}
});
});
Örnek: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Bunu jQueryUI API ile yapmanın kolay bir yolunu bulamadım, ancak autocomplete._responseişlevi kendi işlevinizle değiştirebilir ve ardından varsayılan jQueryUI işlevini çağırabilirsiniz ( otomatik tamamlamanın prototypenesnesini genişletmek için güncellendi ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Ve sonra olaya bir olay işleyicisini bağlayın autocompletesearchcomplete(içerik, aramanın sonucudur, bir dizidir):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Burada olan şey, otomatik tamamlamanın responseişlevini bir değişkene ( __response) kaydetmeniz ve ardından applyonu tekrar çağırmak için kullanmanızdır . Varsayılan yöntemi çağırdığınız için bu yöntemin herhangi bir yan etkisi olduğunu düşünemiyorum. Nesnenin prototipini değiştirdiğimiz için, bu tüm otomatik tamamlama widget'ları için çalışacaktır.
İşte çalışan bir örnek : http://jsfiddle.net/andrewwhitaker/VEhyV/
Örneğim, veri kaynağı olarak yerel bir dizi kullanıyor, ancak bunun önemli olması gerektiğini düşünmüyorum.
Güncelleme: Ayrıca, yeni işlevselliği kendi pencere aracına da sığdırarak varsayılan otomatik tamamlama işlevini genişletebilirsiniz:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Aramanızı şu şekilde .autocomplete({...});değiştirme:
$("input").customautocomplete({..});
Daha sonra özel autocompletesearchcompleteetkinliğe bağlanın :
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Burada bir örneğe bakın : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Bu soru / cevap biraz dikkat çektiğinden, bunu başarmak için bu cevabı daha da güncelleyeceğimi düşündüm. Bu yöntem en çok , sayfada yalnızca bir otomatik tamamlama widget'ınız olduğunda kullanışlıdır . Bunu yapmanın bu yolu, uzak veya yerel bir kaynak kullanan bir otomatik tamamlama widget'ına uygulanabilir:
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);
}
});
İçinde ifhiçbir sonuç tespit edilmediğinde çalıştırmak için özel mantığınızı yerleştireceğiniz yer burasıdır.
Örnek: http://jsfiddle.net/qz29K/
Uzak bir veri kaynağı kullanıyorsanız, şuna benzer bir şey söyleyin:
$("#auto").autocomplete({
source: "my_remote_src"
});
Ardından, AJAX'ın kendiniz araması ve 0 sonuç geldiğinde bunu algılayabilmesi için kodunuzu değiştirmeniz gerekir:
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "my_remote_src",
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
}
},
error: function () {
response([]);
}
});
}
});