[英]Jquery Autocomplete - no result message
I would like the autocomplete to display "no results" in it's drop down list if no result are found. 如果没有找到结果,我希望自动完成功能在下拉列表中显示“没有结果” 。
My situation is like the JQuery default example. 我的情况就像JQuery默认示例。
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Thank you for your help. 谢谢您的帮助。
Here's one way you could accomplish this: 这是您可以完成此操作的一种方法:
$(function() {
var availableTags = [ /* snip */];
var NoResultsLabel = "No Results";
$("#tags").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(availableTags, request.term);
if (!results.length) {
results = [NoResultsLabel];
}
response(results);
},
select: function (event, ui) {
if (ui.item.label === NoResultsLabel) {
event.preventDefault();
}
},
focus: function (event, ui) {
if (ui.item.label === NoResultsLabel) {
event.preventDefault();
}
}
});
});
Basically, you need to provide a function reference as the source
to the autocomplete. 基本上,您需要提供功能参考作为自动完成的
source
。 Inside of that function, you can use the same utility function ( $.ui.autocomplete.filter
) to filter down the results. 在该函数内部,可以使用相同的实用程序函数(
$.ui.autocomplete.filter
)过滤结果。 Then you can see if the results array is empty. 然后,您可以查看结果数组是否为空。 If it is, you can add a default message to the results list.
如果是这样,则可以将默认消息添加到结果列表。
The other two options I've specified prevent the No Results option from being selected or focused. 我指定的其他两个选项会阻止“ 无结果”选项被选中或集中显示。
Example: http://jsfiddle.net/er6LF/ 示例: http : //jsfiddle.net/er6LF/
This fiddle has a working is a functional example for you have: http://jsfiddle.net/andrewodri/wAg4g/ 这个小提琴正在为您提供一个实用的示例: http : //jsfiddle.net/andrewodri/wAg4g/
I changed this: 我改变了这个:
$("#tags").autocomplete({source: availableTags});
To this: 对此:
$("#tags").autocomplete(availableTags);
You can see it's running on the latest version of jQuery, and has the plugin linked on under "Manage Resources" taken from: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ . 您可以看到它正在最新版本的jQuery上运行,并且该插件已链接在“管理资源”下,该插件取自: http : //bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 。
Update: The code above works if you happen to be using the plugin referenced... If not, it seems to work as is :) Please note that I did add the code within $(document).ready();
更新:如果您碰巧正在使用引用的插件,则上面的代码可以工作...如果没有,它似乎可以正常工作:)请注意,我确实在
$(document).ready();
添加了代码$(document).ready();
, which may have been preventing if from working. ,这可能无法正常工作。 Please see this forked fiddle: http://jsfiddle.net/andrewodri/VLKwe/
请查看以下分叉的小提琴: http : //jsfiddle.net/andrewodri/VLKwe/
Hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.