在你指给我看之前,是的,我已经看了六篇关于这个主题的文章,但是我仍然不明白为什么这不起作用
我的目标是检测自动完成何时产生0个结果。代码如下:
$.ajax({
url:'sample_list.foo2',
键入:“get”,
成功:函数(数据、textStatus、XMLHttpRequest){
var建议=data.split(“,”);
$(“#实体搜索”).autocomplete({
资料来源:建议,
最小长度:3,
选择:函数(e,ui){
entityAdd(ui.item.value);
},
打开:函数(e,ui){
log($(“.ui autocomplete li”).size();
},
搜索:功能(e、ui){
log(“搜索返回:+$(“.ui autocomplete li”).size();
},
关闭:函数(e,ui){
log(“on close”+$(“.ui autocomplete li”).size();
$(“#实体搜索”).val(“”);
}
});
$(“#实体搜索”).autocomplete(“结果”),函数(事件,数据){
如果(!data){alert('nothing found!');}
})
}
});
搜索本身工作正常,我可以让结果毫无问题地出现。据我所知,我应该能够用自动完成(“结果”)处理程序截取结果。在这种情况下,它根本不会开火。(即使是不引用结果数量的通用警报或console.log也不会触发)。打开事件处理程序显示正确的结果数(当有结果时),搜索和关闭事件处理程序报告的结果大小总是落后一步
我觉得我错过了一些显而易见的东西,但我就是看不到
jQueryUI 1.9
jQueryUI 1.9为autocomplete小部件提供了响应事件,我们可以利用该事件检测是否未返回任何结果:
搜索完成后,在显示菜单之前触发。用于建议数据的本地操作,其中不需要自定义源选项回调。搜索完成时始终会触发此事件,即使由于没有结果或自动完成被禁用而不显示菜单也是如此
因此,考虑到这一点,我们不得不在jQueryUI 1.8中进行的黑客攻击被以下内容取代:
$(函数(){
$(“输入”)。自动完成({
资料来源:/***/,,
响应:功能(事件、用户界面){
//content是将要发送到响应回调的数组。
如果(ui.content.length==0){
$(“#空消息”).text(“未找到结果”);
}否则{
$(“#空消息”).empty();
}
}
});
});
示例:http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
我无法用jQueryUI API找到一种简单的方法来实现这一点,但是,您可以用自己的函数替换autocomplete.\u response函数,然后调用默认的jQueryUI函数(更新以扩展autocomplete的原型对象):
var\uuu response=$.ui.autocomplete.prototype.\u response;
$.ui.autocomplete.prototype.\u响应=函数(内容){
__响应。应用(此[内容]);
this.element.trigger(“autocompletesearchcomplete”,[content]);
};
然后将事件处理程序绑定到autocompletesearchcomplete事件(内容是搜索结果,一个数组):
$(“输入”).bind(“自动完成搜索完成”,函数(事件,内容){
$(“#结果”).html(contents.length);
});
这里发生的事情是,您正在将autocomplete的response函数保存到一个变量(\u response)中,然后使用apply再次调用它。我无法想象这个方法会有什么不良影响,因为您正在调用默认方法。由于我们正在修改对象的原型,这将适用于所有自动完成小部件
以下是一个有效的示例:http://jsfiddle.net/andrewwhitaker/VEhyV/
我的示例使用本地数组作为数据源,但我认为这并不重要
更新:您还可以将新功能包装在自己的小部件中,扩展默认的自动完成功能:
$.widget(“ui.customautocomplete”),$.extend({},$.ui.autocomplete.prototype{
_答复:职能(内容){
$.ui.autocomplete.prototype.\u response.apply(这是参数);
$(this.element).trigger(“autocompletesearchcomplete”,[contents]);
}
}));
从.autocomplete({…})更改呼叫至:
$(“输入”).customautocomplete({..});
然后稍后绑定到自定义autocompletesearchcomplete事件:
$(“输入”).bind(“自动完成搜索完成”,函数(事件,内容){
$(“#结果”).html(contents.length);
});
请参见此处的示例:http://jsfiddle.net/andrewwhitaker/VBTGJ/
由于这个问题/答案已经引起了一些注意,我想我应该用另一种方法来更新这个答案。当页面上只有一个自动完成小部件时,此方法最有用。这种方法可以应用于使用远程或本地源的自动完成小部件:
var src=[…];
$(“#自动”).autocomplete({
来源:功能(请求、响应){
var results=$.ui.autocomplete.filter(src、request.term);
如果(!results.length){
$(“#无结果”).text(“未找到结果!”);
}否则{
$(“#无结果”).empty();
}
答复(结果);
}
});
在if中,当未检测到任何结果时,您将放置自定义逻辑以执行
示例:http://jsfiddle.net/qz29K/
如果您使用的是远程数据源,请这样说:
$(“#自动”).autocomplete({
资料来源:“my_remote_src”
});
然后,您需要更改代码,以便自己进行AJAX调用,并在返回0结果时进行检测:
$(“#自动”).autocomplete({
来源:功能(请求、响应){
$.ajax({
url:“my_remote_src”,
数据:请求,
成功:功能(数据){
答复(数据);
如果(data.length==0){
//为空结果执行逻辑。
}
},
错误:函数(){
答复([]);
}
});
}
});