在 jQuery UI 自动完成上没有检测到结果 [英] Detecting no results on jQuery UI autocomplete
问题描述
在你向我指出他们之前，是的，我已经查看了关于这个主题的六篇帖子，但我仍然不明白为什么这不起作用.
我的目标是检测自动完成何时产生 0 个结果.代码如下:
$.ajax({网址:'sample_list.foo2'，类型:'获取'，成功:功能(数据，文本状态，XMLHttpRequest){var 建议=data.split(",");$("#entitySearch").自动完成({来源:建议，最小长度:3，选择:函数(e，ui){entityAdd(ui.item.value);},打开:函数(e，ui){console.log($(".ui-autocomplete li").size());},搜索:函数(e，ui){console.log("搜索返回:" + $(".ui-autocomplete li").size());},关闭:函数(e，ui){console.log("on close" + $(".ui-autocomplete li").size());$("#entitySearch").val("");}});$("#entitySearch").autocomplete("result", function(event, data) {if (!data) { alert('没有发现任何东西！');}})}});搜索本身运行良好，我可以毫无问题地显示结果.据我了解，我应该能够使用 autocomplete("result") 处理程序拦截结果.在这种情况下，它根本不会触发.(即使是不引用结果数量的通用警报或 console.log 也永远不会触发).open 事件处理程序显示正确的结果数(当有结果时)，而 search 和 close 事件处理程序报告的结果大小总是落后一步.
我觉得我在这里遗漏了一些明显而明显的东西，但我只是没有看到.
jQueryUI 1.9
jQueryUI 1.9 使用 response 事件祝福自动完成小部件，我们可以利用它来检测是否没有返回结果:
在搜索完成后，在菜单显示之前触发.对于不需要自定义源选项回调的建议数据的本地操作很有用.此事件总是在搜索完成时触发，即使由于没有结果或禁用自动完成而不会显示菜单也是如此.
因此，考虑到这一点，我们必须在 jQueryUI 1.8 中进行的黑客攻击被替换为:
$(function() {$("输入").自动完成({来源:/* */，响应:函数(事件，用户界面){//ui.content 是即将发送到响应回调的数组.如果(ui.content.length === 0){$("#empty-message").text("未找到结果");} 别的 {$("#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 = 函数(内容){__response.apply(this, [content]);this.element.trigger("autocompletesearchcomplete", [内容]);};然后给autocompletesearchcomplete事件绑定一个事件处理器(contents是搜索的结果，一个数组):
$("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, {_响应:功能(内容){$.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").自动完成({来源:功能(请求，响应){var 结果 = $.ui.autocomplete.filter(src, request.term);如果(！结果.长度){$("#no-results").text("未找到结果！");} 别的 {$("#no-results").empty();}响应(结果)；}});在 if 内，您将放置自定义逻辑以在未检测到结果时执行.
示例: http://jsfiddle.net/qz29K/>
如果您使用的是远程数据源，请这样说:
$("#auto").autocomplete({来源:my_remote_src"});然后您需要更改您的代码，以便您自己进行 AJAX 调用并可以检测何时返回 0 个结果:
$("#auto").autocomplete({来源:功能(请求，响应){$.ajax({url: "my_remote_src",数据:请求，成功:功能(数据){响应(数据)；if (data.length === 0) {//为空结果做逻辑.}},错误:函数(){回复([]);}});}});Before you point me to them, yes, I have reviewed the half dozen posts on this topic, but I am still stymied as to why this doesn't work.
My goal is to detect when the autocomplete yields 0 results. Here's the code:
$.ajax({
url:'sample_list.foo2',
type: 'get',
success: function(data, textStatus, XMLHttpRequest) {
var suggestions=data.split(",");
$("#entitySearch").autocomplete({
source: suggestions,
minLength: 3,
select: function(e, ui) {
entityAdd(ui.item.value);
},
open: function(e, ui) {
console.log($(".ui-autocomplete li").size());
},
search: function(e,ui) {
console.log("search returned: " + $(".ui-autocomplete li").size());
},
close: function(e,ui) {
console.log("on close" + $(".ui-autocomplete li").size());
$("#entitySearch").val("");
}
});
$("#entitySearch").autocomplete("result", function(event, data) {
if (!data) { alert('nothing found!'); }
})
}
});
The search itself works fine, I can get results to appear without a problem. As I understand it, I should be able to intercept the results with the autocomplete("result") handler. In this case, it never fires at all. (Even a generic alert or console.log that doesn't reference the number of results never fires). The open event handler shows the correct number of results (when there are results), and the search and close event handlers report a result size that is always one step behind.
I feel like I'm missing something obvious and glaring here but I just don't see it.
jQueryUI 1.9
jQueryUI 1.9 has blessed the autocomplete widget with the response event, which we can leverage to detect if no results were returned:
Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.
So, with that in mind, the hacking we had to do in jQueryUI 1.8 is replaced with:
$(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();
}
}
});
});
Example: http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
I couldn't find a straightforward way to do this with the jQueryUI API, however, you could replace the autocomplete._response function with your own, and then call the default jQueryUI function (updated to extend the autocomplete's prototype object):
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
And then bind an event handler to the autocompletesearchcomplete event (contents is the result of the search, an array):
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
What's going on here is that you're saving autocomplete's response function to a variable (__response) and then using apply to call it again. I can't imagine any ill-effects from this method since you're calling the default method. Since we're modifying the object's prototype, this will work for all autocomplete widgets.
Here's a working example: http://jsfiddle.net/andrewwhitaker/VEhyV/
My example uses a local array as a data source, but I don't think that should matter.
Update: You could also wrap the new functionality in its own widget, extending the default autocomplete functionality:
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
Changing your call from .autocomplete({...}); to:
$("input").customautocomplete({..});
And then bind to the custom autocompletesearchcomplete event later:
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
See an example here: http://jsfiddle.net/andrewwhitaker/VBTGJ/
Since this question/answer has gotten some attention, I thought I'd update this answer with yet another way to accomplish this. This method is most useful when you have only one autocomplete widget on the page. This way of doing it can be applied to an autocomplete widget that uses a remote or local source:
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);
}
});
Inside the if is where you would place your custom logic to execute when no results are detected.
Example: http://jsfiddle.net/qz29K/
If you are using a remote data source, say something like this:
$("#auto").autocomplete({
source: "my_remote_src"
});
Then you'll need to change your code so that you make the AJAX call yourself and can detect when 0 results come back:
$("#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([]);
}
});
}
});
这篇关于在 jQuery UI 自动完成上没有检测到结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
