问题
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.
$(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.
回答1:
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. 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.
Example: http://jsfiddle.net/er6LF/
回答2:
This fiddle has a working is a functional example for you have: 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/.
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();
, which may have been preventing if from working. Please see this forked fiddle: http://jsfiddle.net/andrewodri/VLKwe/
Hope that helps!
来源:https://stackoverflow.com/questions/8663189/jquery-autocomplete-no-result-message