Jquery自动完成 - 无结果消息 [英] 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.
我的情况与JQuery默认示例类似。
My situation is like the JQuery default example.
$(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:
$ b $ var
$(#tags)。autocomplete({
source:
$ b $函数(请求,响应){
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();
}
}
});
});
$(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();
}
}
});
});
基本上,您需要提供函数引用作为源
到自动完成。在该函数内部,您可以使用相同的实用程序函数( $。ui.autocomplete.filter
)来过滤结果。然后你可以看到结果数组是否为空。如果是这样,您可以将默认消息添加到结果列表中。
Basically, you need to provide a function reference as the source
to the autocomplete. Inside of that function, you can use the same utility function ($.ui.autocomplete.filter
) to filter down the results. 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.
示例: http://jsfiddle.net/er6LF/
这篇关于Jquery自动完成 - 无结果消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!