在 jQueryUI 自动完成中检测不到任何结果

在你指给我看之前，是的，我已经回顾了关于这个主题的半打帖子，但是我仍然不知道为什么这不起作用。

我的目标是检测自动补全何时产生0个结果:

 $.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!'); }


})
}
});

搜索本身工作良好，我可以得到的结果显示没有问题。据我所知，我 应该能够通过自动完成(“ result”)处理程序拦截结果。在这种情况下，它根本不会开火。(即使是一个通用的警报或 console. log，如果没有引用结果的数量，也不会触发)。打开事件处理程序显示正确的结果数(当有结果时) ，搜索和关闭事件处理程序报告的结果大小总是落后一步。

我觉得我漏掉了一些显而易见的东西但我就是看不到。

98963 次浏览
小开
最佳答案

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([]);
}
});
}
});
小开

If you are using a remote data source (like a MySQL database, PHP, or whatever on the server side) there are a couple of other cleaner ways to handle a situation when there's no data to return to the client (without the need for any hacks or core code UI code changes).

I use PHP and MySQL as my remote data source and JSON to pass information between them. In my case I seemed to get jQuery exception errors if the JSON request did not get some sort of response from the server, so I found it easier to just return an empty JSON response from the server side when there's no data and then handle the client response from there:

if (preg_match("/^[a-zA-Z0-9_]*$/", $_GET['callback'])) {//sanitize callback name
$callback = $_GET['callback'];
} else { die(); }


die($callback . "([])");

Another way would be to return a flag in the response from the server to indicate that there's no matching data and perform actions client side based on the presence (and or value) of the flag in the response. In this case the servers response would be something like:

die($callback . "([{'nodata':true}])");

Then based on this flag actions can be performed client side:

$.getJSON('response.php?callback=?', request, function (response) {
if (typeof response[0].nodata !== 'undefined' && response[0].nodata === true) {
alert('No data to display!');
} else {
//Do whatever needs to be done in the event that there is actually data to display.
}
});
小开

After hours playing I finally found a trick to display No match found in jQuery autocomplete. Look at the above code and simply add a div, in my case #ulNoMatch and its style set to displap:none. In the callback success method check if the array returned has length == 0. If it is there you go, you made your day! :)

<pre><div class="ui-widget1" style="width: auto;">
<asp:TextBox ID="txtSearch" class="tb" runat="server" Width="150px">
</asp:TextBox>
<ul id="ulNoMatch" class="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all"
role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16;
display: none; width: 150px;">
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches
Found</a></li>
</ul>
</div><pre>
<b>
<b>


Enter code here


<script>
$(function () {
$("input[id$='txtSearch']").autocomplete({
source: function (request, response) {
$.ajax({
url: "splah.aspx/GetByName",
data: "{ 'strName': '" + request.term.trim() + "' }",
dataType: "json",
type: "POST",
//cacheLength: 1,
contentType: "application/json; charset=utf-8",
dataFilter: function (data) {
return data; },
success: function (data) {
var found = $.map(data.d, function (item) {
return {
value: item.Name,
id: item.id
}
});


if (found.length == 0)
{
$("#ulNoMatch").show();
}
else
{
$("#ulNoMatch").hide();
}
response(found);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select: function (event, ui) {
$("input[id$='txtSearch']").val(ui.item.label);
$("input[id$='txtID']").val(ui.item.id);
return false;
},
minLength: 1
});
});
</script>
小开 
function SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
dataType: "json",
success: function (data.d) {
if ((data.d).length == 0) {
alert("no result found");
}
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
小开 
The easiest straight forward way to do it.


$("#search-box").autocomplete({
minLength: 2,
source:function (request, response) {
$.ajax({
url: urlPref + "/Api/SearchItems",
data: {
term: request.term
},
success: function (data) {
if (data.length == 0) {
data.push({
Id: 0,
Title: "No results found"
});
}
response(data);
}
});
},
小开

After initializing your autocomplete element, set the messages option if you wanna use the default spans for message indication:

$(<yourselector>).autocomplete('option', 'messages', {
noResults: 'myKewlMessage',
results: function( amount ) {
return amount + ( amount > 1 ? " results were" : " result was" ) + " found.";
}
});

NOTE: This is an experimental API (not documented). jQuery UI developers are still investigating a full solution for string manipulation and internationalization.

小开

Everyone seems to be ignoring the easy, built-in way: use the messages:noResults event.

$('#field_name').autocomplete({
source: $('#field_name').data('autocomplete-source'),
messages: {
noResults: function(count) {
console.log("There were no matches.")
},
results: function(count) {
console.log("There were " + count + " matches")
}
}
})

This feature was added in jQuery 1.9, as an experimental feature (described here). As at July 2017, it is not yet documented in the API.


提交答案