在jquery自动完成中处理没有结果

嘿我正在尝试在用户当前查询没有结果时返回消息! 我知道我需要利用keyup事件,但看起来插件正在使用它

您可以尝试提供一个解析选项(处理数据解析的函数),并在没有返回结果进行解析时执行您需要的操作。

此示例假定您正在返回包含FullName和Address属性的JSON对象数组。

$('#search').autocomplete( { dataType: "json", parse: function(data) { var array = new Array(); if (!data || data.length == 0) { // handle no data case specially } else { for (var i = 0; i < data.length; ++i) { var datum = data[i]; array[array.length] = { data: datum, value: data.FullName + ' ' + data.Address, result: data.DisplayName }; } } return array; } }); 

这个问题已经过时了,无论如何我正在使用新的jQuery UI 1.8.16,自动完成现在已经完全不同了: http : //jqueryui.com/demos/autocomplete/#default

无论如何,如果你试图做同样的问题,那么就没有更多的解析函数了,据我所知,没有用搜索结果调用的函数。

我设法解决这个问题的方法是重写自动完成的过滤function – 注意:这会影响你所有的自动完成function

 $.ui.autocomplete.filter = function(array, term) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" ); var aryMatches = $.grep( array, function(value) { return matcher.test(value.label || value.value || value); }); if (aryMatches.length == 0){ aryMatches.push({ label: 'no match found', value: null }); } return aryMatches; }; 

该函数稍微从源代码修改,grep调用是相同的,但如果没有结果我添加一个值为null的对象,那么我覆盖select调用以检查null值。

如果您继续输入并且未找到任何匹配项,则会在下拉菜单中显示“找不到匹配项”,这非常酷。

要覆盖select调用,请参阅jQuery UI Autocomplete,禁用Select&Close事件

 $(this).data('autocomplete').menu.options.selected = function(oEvent, ui){ if ($(ui.item).data('item.autocomplete').value != null){ //your code here - remember to call close on your autocomplete after } }; 

由于我在页面上的所有自动填充中使用此function,因此请确保先检查值是否为null! 在您尝试引用不存在的键之前。

我正在使用以下代码用于相同的目的(消息显示在自动完成列表中):

 success: function(data, status, xhr){ if(!data.length){ var result = [ { label: 'There are no matches for your query: ' + response.term, value: response.term } ]; response(result); } else{ // normal response } } 

您还可以使用“响应”事件来检查这一点。 简单而有力。 http://api.jqueryui.com/autocomplete/#event-response

 response: function (event, ui) { if (ui.content.length == 0) { //Display an alert or something similar since there are no results } },