5

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.

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
m14Grl
  • 117
  • 1
  • 2
  • 6
  • possible duplicate of [Detecting no results on jQuery UI autocomplete](http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete) – Andrew Whitaker Dec 29 '11 at 02:22
  • Actually, this one is slightly different than the one I linked as a duplicate. Please disregard my close vote. – Andrew Whitaker Dec 29 '11 at 02:33

2 Answers2

10

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/

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
0

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!

Andrew Odri
  • 8,868
  • 5
  • 46
  • 55