jQuery UI 自动完成 - 没有结果消息
Posted
技术标签:
【中文标题】jQuery UI 自动完成 - 没有结果消息【英文标题】：jQuery UI autocomplete- no results message 【发布时间】：2013-12-01 22:11:26 【问题描述】：如果没有结果，我正在尝试在下拉菜单中显示“无结果”消息。例如，如果我在文本字段中输入“ABCD”，但没有匹配的实体，则会显示“无结果”消息。会显示出来。
在通过 *** 查看了完成此任务的各种不同方法并尝试了其中一些之后，我仍然无法使其正常工作。
当没有找到结果时，如何在下拉菜单中添加“无结果”消息？
jQuery：
$element.autocomplete(
source: function (request, response)
$.ajax(
url: thUrl + thQS,
type: "get",
dataType: "json",
cache: false,
data:
featureClass: "P",
style: "full",
maxRows: 12
,
success: function (data)
response($.map(data, function (item)
if (data.indexOf(item) === -1)
return label: "No Results."
else
return
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
));
);
,
minLength: that.options.minLength,
select: function (event, ui)
reRenderGrid();
);
我已尝试使用以下内容添加 if() 语句，但没有奏效。
if (data.length === 0)
// Do logic for empty result.
如果我执行以下操作，我可以用文本“No Result”覆盖第一个条目...
if (data.indexOf(item) === 0)
return
label: "No Results."
...但是如果我设置 data.indexOf(item) === -1 则什么都不会显示。
我最近尝试了以下，当没有数据时，它进入循环，但是菜单中没有显示“No Results”：
success: function (data)
response($.map(data, function (item)
return
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
));
if (data.length === 0)
label: "No Results."
我还尝试使用 Andrew Whitaker 的以下示例，但没有成功：
安德鲁·惠特克的小提琴：http://jsfiddle.net/J5rVP/128/
来源：http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/
【问题讨论】：
【参考方案1】：if (!ui.content.length)
var noResult = value:"",label:"No results found" ;
ui.content.push(noResult);
//$("#message").text("No results found");
小提琴
http://jsfiddle.net/J5rVP/129/
更新
将代码放在自动完成设置的末尾select: function (event, ui) ..之后
..........
minLength: that.options.minLength,
select: function (event, ui)
reRenderGrid();
, //HERE - make sure to add the comma after your select
response: function(event, ui)
if (!ui.content.length)
var noResult = value:"",label:"No results found" ;
ui.content.push(noResult);
);
【讨论】：
感谢特雷弗的回复。我注意到您编辑了 Andrew Whitacker 的小提琴，但是，他的小提琴与我的并不完全相同。我会把你上面的代码放在哪里？我的选择语句周围的某个地方？你能只用我的代码创建一个小提琴吗？ 嘿特雷弗。我试过了，但没有用。我忍不住想这是因为我已经有了回应。那么如果success语句中的第一个响应成功了，是不是也会执行select语句下面的第二个呢？就我而言，它甚至没有达到声明。我放了一个断点，它从未停止过。 @Keven 好吧，我不知道该告诉你什么，除非你能用你的代码得到一个可行的例子。它不是other response 这里还有一个很像我的小提琴第一个小提琴，除了我设置 ajax 成功函数的方式看起来像你的。 jsfiddle.net/J5rVP/130 尽量让你的代码接近小提琴格式。
使用“响应”是否需要特定版本的 JQuery？我无法让它在 1.8.17 中工作 - 响应代码永远不会被命中，但没有 JS 错误。
@NickG 我不相信，我在 JQuery 1.7.2 上使用我的小提琴对其进行了测试，并且“响应”运行了。也许它是你的 jQuery ui 版本？【参考方案2】：
像这样修改函数以检查数据长度。
success: function (data)
if(!data.length)
var result = [
label: 'No matches found',
value: response.term
];
response(result);
else
// normal response
response($.map(data, function (item)
return
label: item.CompanyName + " (" + item.SymbolName + ")",
value: item.CompanyName
));
【讨论】：
但是用户可以选择No matches found，这是错误的，我不明白为什么人们会这样做。
这很容易在 select (events, ui) 函数中修复。【参考方案3】：
我的答案与@neelmeg 和@Trever 几乎相同，但我添加了额外的检查，因此用户将无法选择“无结果”消息：
$(".my-textbox").autocomplete(
minLength: 2,
open: function () $('.ui-autocomplete').css('z-index', 50); ,
source: function (request, response)
$.ajax(
url: "/some-url",
type: "POST",
dataType: "json",
data: prefix: request.term, __RequestVerificationToken: token ,
success: function (data)
if (!data.length)
var result = [ label: "no results", value: response.term ];
response(result);
else
response($.map(data, function (item)
return label: item.someLabel, value: item.someValue ;
))
)
,
select: function (event, ui)
var label = ui.item.label;
if (label === "no results")
// this prevents "no results" from being selected
event.preventDefault();
else
/* do something with the selected result */
var url = "some-url"
window.location.href = url;
);
【讨论】：
【参考方案4】：对我来说，出现此消息的原因是：
MISSING CSS FILES O JQUERY UI
所以添加：
<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />
解决了我的问题
【讨论】：
以上是关于jQuery UI 自动完成 - 没有结果消息的主要内容，如果未能解决你的问题，请参考以下文章