jQueryUI 1.9
jQueryUI 1.9 đã ban phước cho tiện ích tự động hoàn thành với responsesự kiện, mà chúng tôi có thể tận dụng để phát hiện nếu không có kết quả nào được trả về:
Được kích hoạt sau khi tìm kiếm hoàn tất, trước khi menu được hiển thị. Hữu ích cho thao tác cục bộ dữ liệu đề xuất, nơi không cần gọi lại tùy chọn nguồn tùy chỉnh. Sự kiện này luôn được kích hoạt khi tìm kiếm hoàn tất, ngay cả khi menu sẽ không được hiển thị vì không có kết quả hoặc tính năng Tự động hoàn thành bị tắt.
Vì vậy, với suy nghĩ đó, việc hack chúng ta phải thực hiện trong jQueryUI 1.8 được thay thế bằng:
$(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();
}
}
});
});
Ví dụ: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
Tôi không thể tìm thấy cách đơn giản để thực hiện việc này với API jQueryUI, tuy nhiên, bạn có thể thay thế autocomplete._responsehàm bằng hàm của riêng mình, rồi gọi hàm jQueryUI mặc định ( được cập nhật để mở rộng prototypeđối tượng của tự động hoàn thành ) :
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
Và sau đó liên kết một trình xử lý sự kiện với autocompletesearchcompletesự kiện (nội dung là kết quả của tìm kiếm, một mảng):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Điều đang xảy ra ở đây là bạn đang lưu responsehàm của autocomplete vào một biến ( __response) và sau đó sử dụng applyđể gọi lại nó. Tôi không thể tưởng tượng được bất kỳ tác động xấu nào từ phương thức này vì bạn đang gọi phương thức mặc định. Vì chúng tôi đang sửa đổi nguyên mẫu của đối tượng, điều này sẽ hoạt động đối với tất cả các tiện ích con tự động hoàn thành.
Đây là một ví dụ hoạt động : http://jsfiddle.net/andrewwhitaker/VEhyV/
Ví dụ của tôi sử dụng một mảng cục bộ làm nguồn dữ liệu, nhưng tôi không nghĩ điều đó nên quan trọng.
Cập nhật: Bạn cũng có thể bao bọc chức năng mới trong tiện ích con của chính nó, mở rộng chức năng tự động hoàn thành mặc định:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Thay đổi cuộc gọi của bạn từ .autocomplete({...});thành:
$("input").customautocomplete({..});
Và sau đó liên kết với autocompletesearchcompletesự kiện tùy chỉnh sau:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
Xem ví dụ tại đây : http://jsfiddle.net/andrewwhitaker/VBTGJ/
Vì câu hỏi / câu trả lời này đã thu hút một số sự chú ý, tôi nghĩ tôi sẽ cập nhật câu trả lời này bằng một cách khác để thực hiện điều này. Phương pháp này hữu ích nhất khi bạn chỉ có một tiện ích con tự động hoàn thành trên trang. Cách làm này có thể được áp dụng cho tiện ích con tự động hoàn thành sử dụng nguồn cục bộ hoặc từ xa:
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);
}
});
Bên trong iflà nơi bạn sẽ đặt logic tùy chỉnh của mình để thực thi khi không có kết quả nào được phát hiện.
Ví dụ: http://jsfiddle.net/qz29K/
Nếu bạn đang sử dụng nguồn dữ liệu từ xa, hãy nói điều gì đó như sau:
$("#auto").autocomplete({
source: "my_remote_src"
});
Sau đó, bạn sẽ cần thay đổi mã của mình để tự thực hiện cuộc gọi AJAX và có thể phát hiện khi có 0 kết quả trả về:
$("#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([]);
}
});
}
});