jQueryUI 1.9
jQueryUI 1.9 为自动完成小部件添加了response
事件,我们可以利用它来检测是否没有返回结果:
在搜索完成后、菜单显示之前触发。对于不需要自定义源选项回调的建议数据的本地操作很有用。搜索完成时始终触发此事件,即使由于没有结果或自动完成功能被禁用而不会显示菜单也是如此。
因此,考虑到这一点,我们必须在 jQueryUI 1.8 中进行的黑客攻击被替换为:
$(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();
}
}
});
});
示例:http: //jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
我找不到使用 jQueryUI API 执行此操作的直接方法,但是,您可以用autocomplete._response
自己的函数替换该函数,然后调用默认的 jQueryUI 函数(更新以扩展自动完成的prototype
对象):
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
然后将事件处理程序绑定到autocompletesearchcomplete
事件(内容是搜索的结果,一个数组):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
这里发生的事情是您将自动完成response
功能保存到变量 ( __response
) 中,然后使用apply
它再次调用它。由于您正在调用默认方法,因此我无法想象此方法会产生任何不良影响。由于我们正在修改对象的原型,这将适用于所有自动完成小部件。
这是一个工作示例:http: //jsfiddle.net/andrewwhitaker/VEhyV/
我的示例使用本地数组作为数据源,但我认为这无关紧要。
更新:您还可以将新功能包装在它自己的小部件中,扩展默认的自动完成功能:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
将您的通话更改.autocomplete({...});
为:
$("input").customautocomplete({..});
然后稍后绑定到自定义autocompletesearchcomplete
事件:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
在此处查看示例:http : //jsfiddle.net/andrewwhitaker/VBTGJ/
由于这个问题/答案得到了一些关注,我想我会用另一种方法来更新这个答案来完成这个。当页面上只有一个自动完成小部件时,此方法最有用。这种方法可以应用于使用远程或本地源的自动完成小部件:
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);
}
});
在内部if
是您放置自定义逻辑以在未检测到结果时执行的位置。
示例:http: //jsfiddle.net/qz29K/
如果您使用的是远程数据源,请这样说:
$("#auto").autocomplete({
source: "my_remote_src"
});
然后您需要更改代码,以便您自己调用 AJAX 并检测何时返回 0 个结果:
$("#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([]);
}
});
}
});